くぅ、CSS の挙動が違いすぎる
以前作った、某ブランドのページをそういえば Firefox でチェックしてなかったなぁ～～と思って見てみたんですよ！ いやまぁそもそもそのこと自体がすでに間違っていたような気はするんだけどさ。でもまぁ、見ないわけにもいかないし。
で、見たら見事にレイアウトが崩れるわけね。
うが───────！！！
ただこの辺、Firefox の方が CSS の解釈としては厳密のはずだ。
というのがボクの持論だ。
というわけで CSS の見直し。
IE では Width よりも Padding や Margin を優先させる。
ボクが作ったサイトは、全て、Width はコンテンツ全体の長さに指定してあったの。その幅は 750 ドット。これは 800x600 のフルスクリーンでブラウザを開いたとき、縦スクロールバーの領域をのぞいて表示できるようにしたサイズである。
で、サイト自体は 750 ドットだとしても、中身は段落わけとかするわけで、それぞれ 720 ドット、710 ドット 700 ドットの幅の種類がある。でもこれらは、Padding で指定していて気にしていなかったわけだ。だから、750 ドットの中に 720 ドットのを置くのは問題ないが、更にその中に 710 ドットのものが配置されるわけだが、当然 Width は 750 なんて指定してあるもんだから、Firefox でみると、おさまりきらなかった分がはみ出るわけだ。
ちくしょう！
というわけで厳密に設定し直す。
ところがどうしても、一つだけ不可解なことが起きた。
幅 750 ドット（ページ全体）
幅 700 ドットのヘッダ
幅 750 ドットのメニュー
幅 710 ドットの本体
幅 750 ドットのフッタ
上記がスタイルシートの簡単な内訳なのだが、本体とフッタの間にページ全体で指定した背景がわずかながら入り込んでしまうのだ。しかもこれは Firefox で起き、本体内部にセンタリング指定があるときだけ起きる。
このセンタリングの指定をとれば、ちゃんと本体のすぐ下にフッタが表示されるのである。
IE7 ではどちらもで問題なかった。
とはいえこれをすぐに Firefox の問題だと考えるのは早計である。
だが、いろいろアレやコレやと手を尽くしたのだが、解決できなかった。Firefox で見ると、一番下のフッタの前に変な線が入ってしまう……orz。とりあえずおあずけ……なんだろうなぁ～～～？
#comment
