WinIE6とモダンブラウザではボックスサイズの計算が異なる
例：paddingやborderを指定した場合
div.Test {
background: #8ad09e;
width: 500px;
height: 500px;
padding: 50px;
border: 50px solid #023e35;
}
ボックスサイズの解釈の違い
指定したピクセルと解釈が異なる為、
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ハックを行った。
SEOやアクセシビリティを考慮し、CSSでWEBデザインをする際の便利な技を公開しています。
