IEとFireFoxとの別のビュー、CSS DIVボーダーのヘルプ。

IEとFireFoxの間にあるdiv要素のボーダーの表示に違いがあるイメージを表示しています。 IEは正しい方法で境界を表示しますが、FireFoxは表示しません。お分かりのように、BorderDivの黒い境界線は、親のdivの高さが78ピクセルであるという事実を尊重しません。代わりに、それはほとんどの外側divの高さを尊重します。物事を複雑にするために、境界線の右側は、最も外側のdivも尊重せずに描かれています。IEとFireFoxとの別のビュー、CSS DIVボーダーのヘルプ。

alt text

私はここで失われています。 FireFoxでIEと同じ結果を達成するために必要なことは何ですか？ BorderDivの幅と高さを100％にしたいので、明示的に設定する必要はありません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red"> 
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;"> 
    <div id = "ContentColumn" style = "margin-left: 50px; height: 78px;"> 
    <div id = "BorderDiv" style = "border: solid 1px Black; height: 100%; width: 100%">right</div> 
     </div> 
    </div> 
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;">left</div> 
</div> 
</BODY> 
</HTML>

ありがとう：

は、ここに私のコードです。

出典

2010-11-23 Wodzu

IEとFFのどちらのバージョンですか？ –

FF：3.6.12、IE：8.0.7600 – Wodzu

なぜボーダーdivを使用するのですか？ – Mauro

実際には逆です：Firefoxは正しく、IEは間違っています。

これは、box modelのIEの悪い実装のためです。

div "BorderDiv"のコンテナdiv（ "ContentColumn"）の高さは、78pxです。次に、境界線、パディング、マージンが追加されます。

理由だけではなく、「ContentColumn」のdivに境界線を追加し、「BorderDiv」を取り除くませんが、完全にDIV：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red"> 
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;"> 
     <div id = "ContentColumn" style = "margin-left: 50px; height: 76px; border: solid 1px Black;"> 
      right 
     </div> 
    </div> 
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;"> 
     left 
    </div> 
</div> 
</BODY> 

</HTML>

を編集 76pxの高さを持っている「ContentColumnを」改変、境界線のサイズを考慮に入れる。

また、quirksmodeをIEで回避すると、正しいボックスモデルが使用されるため、IEで回避することをお勧めします。

出典

2010-11-23 10:25:54

ありがとう、私はあなたのコードを試してみました。外観は両方のブラウザで一貫しています。注文の右側が正しく表示されますが、底面はまだ2ピクセル下がっています。それを修正するには？私はBorderDivを追加しました。なぜなら、私は外側のdivのコアマージンをセッティングすることにいくつかの問題があると思っていたからです。 – Wodzu

IEとFireFoxとの別のビュー、CSS DIVボーダーのヘルプ。

答えて

関連する問題