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