Top > Diary > 2008-06-06
//カテゴリ：パソコン
*** くぅ、CSS の挙動が違いすぎる [#a03f8df9]
#ref(../rural_sy00c.png,nolink)

以前作った、某ブランドのページをそういえば Firefox でチェックしてなかったなぁ～～と思って見てみたんですよ！ いやまぁそもそもそのこと自体がすでに間違っていたような気はするんだけどさ。でもまぁ、見ないわけにもいかないし。&br;
で、見たら見事にレイアウトが崩れるわけね。

うが───────！！！

ただこの辺、Firefox の方が CSS の解釈としては厳密のはずだ。&br;
というのがボクの持論だ。&br;
というわけで CSS の見直し。&br;
IE では Width よりも Padding や Margin が優先される。&br;
ボクが作ったサイトは、全て、Width はページ全体の長さに指定してあったのだ。その幅は 750 ドット。これは 800x600 のフルスクリーンでブラウザを開いたとき、縦スクロールバーの領域をのぞいて表示できるようにしたサイズである。&br;
で、サイト自体は 750 ドットだとしても、中身は段落わけとかするわけで、それぞれ 710 ドットと 700 ドットという二種類の幅がある。でもこれらは、Padding で実際の領域を狭く指定していて気にしていなかったわけだ。&br;
だがこれでは 750 ドットの中にそのスタイルを適用すると、750 ドットより小さくなければならないのに、750 ドットという指定のままであるため、Padding でずらした分、はみ出してしまうわけだ。&br;
IE では Padding の設定を優先させるので、幅がはみ出していようが Padding の中におさめてくれる。しかし Firefox ではきっちり 750 ドットとってしまうのだ。

ちくしょう！

というわけでいろいろスタイルシートを設定し直す。&br;
ところがどうしても、一つだけ不可解なことが起きた。&br;

#ref(layout.png,nolink)

上記がスタイルシートの簡単な内訳なのだが、メインコンテンツとフッタの間にページ全体で指定した背景がわずかながら入り込んでしまうのだ。しかもこれは Firefox で起き、本体内部にセンタリング指定があるときだけ起きる。&br;
このセンタリングの指定をとれば、ちゃんとメインコンテンツのすぐ下にフッタが表示されるのである。&br;
IE7 ではどちらでも問題なかった。&br;
とはいえこれをすぐに Firefox の問題だと考えるのは早計である。&br;
だが、いろいろアレやコレやと手を尽くしたのだが、解決できなかった。Firefox で見ると、一番下のフッタの前に変な線が入ってしまう……orz。とりあえずおあずけ……なんだろうなぁ～～～？


しかしスタイルシート……まだまだ微妙だなぁ。&br;
頭に思い描いたレイアウトをそのまま書けば、その通りになるかというと全然そんなことないんだもん。もちろんそれはスタイルシートそのものを扱うスキルが足りていないというのもあるが、こう解釈が違ったのでは、それぞれの解釈を頭の中でシミュレートしつつ入力していかないといけない……しかもいまはウェブブラウザって増えてるし……（Opera とか Safari とか）。&br;
もっと感覚的に作らせてくれよ～～～～と、自分のスキルのなさをブラウザの所為にしてみたｗｗｗ

#comment
    ホーム 一覧 検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS