ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう

症状

CSS1/CSS2ではボックスの幅を算出するときにパディングやボーダーのサイズは除外される。しかしWinIEではこれらを含めて幅や高さを算出する。

例示

<div style="width:150px; height:20px; padding-left:30px; border:10px solid blue;"></div>
<img src="/img/cssbug/winie/img01.png" alt="比較用画像" width="200" height="40">
比較用画像

上段のdiv要素のボーダー外縁のサイズと下段の画像のサイズが等しくなるように指定しています。

スクリーンショット

Moz1.0Moz1.0(互換モード)

WinIE6WinIE6.0(互換モード)

補足

ボックスサイズの算出時にボーダーまでを含めるという考え方はCSS3で導入される予定です。ただし、現在WinIEは公式的にはCSS3をサポートしていません。

修正状況

WinIE6.0標準モードはCSS2に従ったサイズ算出を行います。IE6互換モードでは従来同様、ボーダーまでを含む算出が行われています。

スポンサーリンク

関連記事

スポンサーリンク

マルチバイト文字列(日本語文字)を一文字づつ取り出す

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る