• 追加された行はこの色です。
  • 削除された行はこの色です。
//カテゴリ：パソコン
*** くぅ、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 ドットだとしても、中身は段落わけとかするわけで、それぞれ 720 ドット、710 ドット 700 ドットの幅の種類がある。でもこれらは、Padding で指定していて気にしていなかったわけだ。だから、750 ドットの中に 720 ドットのを置くのは問題ないが、更にその中に 710 ドットのものが配置されるわけだが、当然 Width は 750 なんて指定してあるもんだから、Firefox でみると、おさまりきらなかった分がはみ出るわけだ。
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;
ところがどうしても、一つだけ不可解なことが起きた。&br;

>
幅 750 ドット（ページ全体）
>>
幅 700 ドットのヘッダ
>>
幅 750 ドットのメニュー
>>
幅 710 ドットの本体
>>
幅 750 ドットのフッタ
#ref(layout.png,nolink)


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

#comment

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

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