border-collapse:collapse;とoverflow:hidden;でFirefoxでborderが消えちゃう

いつものようにコーディングしてブラウザチェックをしていたらFirefoxだけTABLEの左ボーダーがどうしても表示してくれなかったんです :sad:
何が原因なんだろうといろいろいじっていた結果どうやらborder-collapse:collapse;とoverflow:hidden;の組み合わせが悪かったみたいです。
overflow:hidden;が指定されたボックスの中に配置されたTABLEで起こる現象みたいで原因はborder-collapse:collapse;を指定したときのFirefoxの仕様にあったっぽい。

統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。

border-collapse – A Day in the Life より引用

そんなわけでFirefoxは左に1pxはみ出すので、そのはみ出した1pxのボーダーがoverflow:hidden;で文字通り隠されてしまうということらしいです。
テストページ

2カラムをfloatでレイアウトして、その解除をoverflow:hidden;でやっているときは注意しなくちゃ :!: :!:
でもSafariは右にはみ出した1pxのボーダーが消えないんだよね。。なんでだろー?

Trackback URI: http://blog.ochanocosaisai.com/wp-trackback.php?p=376

気軽に記事を評価してみて下さい。
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 2.50 out of 5)
Loading ... Loading ...

CSS バグ said,

2009/10/2 金曜日 @ 14:32:25

firefox で border-collapse:collapse; をつかっているtableでborderが消える…

タイトル長っ。 表題の件にかかってしまいまして、まあ検索したらあっさりとバグ だということはわかったんですが。 border-collapse:collapse;とoverflow:hidden;でFirefoxでborderが消えちゃう http:…

コメントする

RSS feed for comments on this post · TrackBack URI · add to hatena hatena.comment 5 users add to del.icio.us 0 user add to livedoor.clip 0 user