border-collapseについて再度調査してみた

当ブログの過去のエントリーborder-collapseの内容は2006年当時の内容であるため、検証したブラウザが少々古い物となっています。

なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます（画像は2倍に拡大してあります）。

• Windows IE6
• Windows IE7
• Windows IE8
• Windows Firefox2
• Windows Firefox3
• Windows Firefox3.5
• Windows Google Chrome3
• Windows Opera9.6
• Windows Safari4
• Macintosh Safari4
• Macintosh Firefox2
• Macintosh Firefox3
• Macintosh Firefox3.5

結果はWindows Internet Explorer6,7,8は内側に表示、Firefox2,3,3.5はWindows,Macintoshともに左に1pxは見出す、Safari4はWindows,Macintoshともに内側に表示、Google Chrome,Opera9.6はともに内側に表示されました。

統合ボーダーモデルとはborder-collapseプロパティの値にcollapseを指定した場合を指します。separeteを指定した場合はこのずれは生じません。

この記事にも再度引用文を入れておきます。

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

関連エントリー

border-collapse