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

Dreamweaver

SEO/CSS+DreamweaverWEBデザインをする際の便利な技を公開しています。

-


オススメサイト

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は加算されている。
見た目は同じでも、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ハックを行った。

-
-