IE6とFirefox2.0で試しています。
次のように、naviでborderを使うとIE6では普通に表示されるのですが、
Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・
両方に正常（希望通り）に表示されるようにするには
どのような記述にすれば良いのでしょうか？
「sample.css」
.wrapper {
background-color: #ccffcc;
margin: auto;
width: 600px;
height: 100%;
}
.navi {
background-color: #aaffaa;
border: 3px solid #ff4500;
width: 600px;
height: 150px;
position: relative;
}
「a.html」
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="navi">
</div>
</div>
</body>
</html>
投稿日時 - 2008-09-13 15:03:49
これはIEのバグです。本来、widthはpaddingやborderの内側なので全体のサイズは(width+左padding+左border+右padding+右border)になるFirefoxやそのほかのブラウザが正しいです。
回避方法としては、「_width と書いても下線を無視して width と見なしてしまう」という別のIEのバグを利用して、下記のように書くと両方で外側のサイズが600pxになります。
width: 594px; /* IE以外用 */
_width: 600px; /* IE専用 */
この下線を使った回避法は他の場面でも使えます。
IE8になれば多分バグが直ってるはずですが。
投稿日時 - 2008-09-13 15:46:21
お礼
ご返答ありがとうございます。
なるほど、IEのバグなんですね。
たしかにその方法はいろいろ使えそうです。
ありがとうございました。
投稿日時 - 2008-09-13 17:24:50
1人が「このQ&Aが役に立った」と投票しています
