WinIE6 と Safari, Netscape, Firefox のCSSボックス解釈

Dreamweaver

SEO/CSS＋DreamweaverでWEBデザインをする際の便利な技を公開しています。

SEO/CSSの技

オススメサイト

5分で分かるCSS講座: 初心者向けのCSS講座です。基礎知識からすぐに役立つ実践サンプル・テクニックをご紹介します。

ページ更新日：2007/02/28

見た目と実際のボックス解釈は異なる

例：paddingやborderを指定した場合

div.Test {
    background: #8ad09e;
    width: 500px;
    height: 500px;
    padding: 50px;
    border: 50px solid #023e35;
}

解釈の違い

見た目は同じでも、padding, border の値が、
WinIE6は減算、Safari, Netscape, Firefoxは加算されている。

2007/12/3 追記
BOXモデルの解釈は、DOCTYPEでも異なる模様。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">の場合は、全てパディング値を引算するだけでOK。

指定したピクセルと解釈が異なる為、
レイアウトがガタガタになる。

CSSハック

div.Test {
    background: #8ad09e;
    width: 400px   !important;    /* モダンブラウザ用 */
    width: 500px;  /* WinIE6 */
    height: 400px  !important;    /* モダンブラウザ用 */
    height: 500px; /* WinIE6 */
    padding: 50px;
    border: 50px solid #023e35;
}

解説

WinIE6は後述の設定を優先し、Safari, Netscape, Firefox などGeckoエンジンのブラウザは、!important を優先する。この特徴を利用してCSSハックを行った。