[CSS]Firefox 3.0/3.5のCSSのバグ情報のまとめ

Firefox 3.xでおこるCSSのバグ（仕様？）をWeb Designer Depotから紹介します。

CSS Bugs and Inconsistencies in Firefox 3.x

下記に、その中からいくつか紹介します。

outlineのバグ

Firefox 3.xではoutlineプロパティを使用した場合、内包要素の余剰分が表示されません。

Firefox 3.x

期待される表示は下記のChromeでのように、内包要素があふれでていても影響を与えません。

Chrome

border-collapseのバグ

Firefox 3.xではborder-collapseプロパティを使用した場合、ブロック要素の直下に使用するとボーダーが期待通りになりません。

Firefox 3.x

期待される表示は下記のChromeでのように、左端のマージンを確保し、上のボーダーは重なります。

Chrome

empty-cellsのバグ

Firefox 3.xではempty-cellsプロパティを使用した場合、期待されるのは表示されない状態ですが、表示されてしまいます。

Firefox 3.x

word-spacingのバグ

Firefox 3.xではword-spacingプロパティを使用した場合、インライン要素に対してマイナスの値を指定しても期待通りに重なりません。

Firefox 3.x

期待される表示は下記のChromeでのように、すべてのwordがそれぞれ重なります。

Chrome

text-decorationのバグ

Firefox 3.xではtext-decorationプロパティを使用した場合、フロートした子孫要素に適用すると親要素と同じ装飾が継承されます。

Firefox 3.x

期待される表示は下記のIE8でのように、親要素に指定した下線の装飾が適用されません。

IE8

white-spaceのバグ

Firefox 3.0ではwhite-spaceプロパティを使用した場合、「pre-line」をサポートしていません。

Firefox 3.0

期待される表示は、下記のFirefox 3.5でのようになります。

Firefox 3.5

また、「pre-wrap」もFirefox 3.0では期待通りに表示されません。

Firefox 3.0

期待される表示は、下記のFirefox 3.5でのようになります。

Firefox 3.5

page-breakのバグ

Firefox 3.xではword-spacingプロパティを使用した場合、ブロックレベル要素が2ページに分かれてしまいます。

Firefox 3.x

期待される動作は下記のOpera 10でのように、リスト要素が収まらない場合は次ページへ配置されます。

Opera 10