投稿者 tel | 2012年6月15日

display: table-cellのブラウザごとの違い

テーブルのtd要素などdisplay: table-cellの要素でheightの解釈がブラウザによって違うのでメモ。

div {
    height: 32px;
    width: 32px;
    background-color: #EEE;
    border: 4px solid #AAA;
    display: table-cell;
}

Google ChromeとIE9だとborderはheightに含まれない。

Firefox、Operaだとborderがheightの計算に含まれる。

http://stackoverflow.com/questions/7545631/table-cell-fixed-height-and-border-issue-in-firefox


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。