Firefox3でのCSS対応について：クリエイターズブログ：ほのおのクリエイターズ

Firefox3でのCSS対応について

先日公開されたFirefox3、なかなか早くて快適でベストなブラウザと言っても過言でないものですが、CSSの解釈が若干変わったため、僕たちWeb製作者にとっては注意しなければならないことがいくつかあります。

現時点でいくつか見つけた注意すべき点を挙げます。

これはどうにもFirefox3のCSSバグではないかと思っているのですが、floatによる回り込みのある要素を包んでいるDIVは、その下に不自然なmarginが発生します。

コードにすると下記のような入れ子状態で発生する可能性が高いと思います。


	～
	～

対応策としては、それらを包むDIVタグで「display:block」と、ブロック要素であることを明確にしてください。DIVタグ自体は元来からブロック要素なんですけどね～…


	～
	～

どうにもdisplay:blockだけではなく、floatによる回り込み要素を包んだDIVは「横幅をpx指定」しないと下側にmarginが出るようです。%指定ではなく、px指定のみです。これは…参った…

Firefox3のCSS解釈はSafariに近いように感じます。Safariはブロック要素に横幅を明示していない場合、IE系とは異なり内容の分だけ必要最低限の幅しか広がってくれません。

そのため、背景色や画像が途中で切れてしまうといったことが発生します。

横幅は%かpxでしっかりと定義しましょう。

まとめてしまうと、「より丁寧に明示する」に尽きると思います。

IE6が絶滅してしまえばもう少しスマートに書けるようになってくるとは思うんですけどね～。IE7に完全シフトしてIE6のシェアが10%切るのはあと2～3年くらいはかかりそうですね…

投稿日：08年06月30日 11:47:54