CSSでIEとFirefoxでの表示の違い

コミュニティー
OKWiki
OKetter
OKStars
OKSHOP

	[ 詳細検索 ]	はじめての方へ FAQ（よくある質問）

<< 前の質問 | 次の質問 >>

解決済みの質問

CSSでIEとFirefoxでの表示の違い

CSSでIEとFirefoxでの表示の違い
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

通報する

QNo.4325704

takagoo100

すぐに回答ほしいです

質問者が選んだベストアンサー

これは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

回答を評価する（0）

通報する

ANo.1

notnot