高さ・横幅指定の大きさがずれる

ちゃんと枠におさめたはずなのに・・・新バージョンのIEで見るとサイズがずれてはみ出してる！

原因

旧バージョンのIEでは、width と height に、padding 値が足されない。

{
width: 100px;
height: 20px;
padding: 10px;
}

と設定した場合、旧バージョンのIEでは 100px×20px のサイズになるが、新バージョンやFirefoxでは 120px×40px （上下左右にpadding値10pxずつが足される）となります。その大きさの差の分サイズがずれてしまいます。

枠をつけるとわかりやすくなります。

これによって、左ナビゲーションや右ナビゲーションの横幅サイズを超えてしまい、ナビゲーションが下に下がってレイアウトが大きくずれてしまっているサイトを時々見かけます。

100px の枠内に収めてスペースも取りたい場合、別の要素で指定する。

div.waku {
width: 100px;
height: 100px;
}

この中に文字を入れたい場合、文字のほうにスタイルを適用する。

div.waku p {
margin: 10px;
}

もしこの記事が役に立ちましたら、ぜひブックマークやブログ・twitterで紹介して下さい。