たまに見かけるのですが IE では整って表示されているのに Firefox では下に落ちてしまっている段組のレイアウト。これはほとんどが CSS の float プロパティでパーセントで数値を指定していることが原因だと思うのです。

IE では外側の border の外側を基準に計算しているのに対し、Firefox では border の内側を基準にしていると思われます。要するに、border の幅を計算に入れなきゃダメだということ。

IE と Firefox での見た目を揃えたいのならば、実際のパーセンテージよりも小さめの数値を指定して、ゆとりを持たせておいたほうがいいです。数値の合計が 100 % になってしまうと、Firefox ではさらに border の幅が加算され、100 % を超えて、画面の下に落ちてしまうことになります。

例えば 75:25 で分割したいなら float で左寄せにし、75:23 ぐらいにしておけば無難だと思います。右寄せであれば 73:25 ぐらいが適当でしょうか。

2007年12月10日 月曜日 16時00分

© 2006-2017 小野塚裕也
トップ ページ