ファイアウォールでのCSSの問題、ボーダーが正しく表示されない

Question

IE、Safari、およびChromeが動作している間、Firefoxで問題が発生しました。

<div class="forDiv">ddd</div> 
<table class="forTable"> .... </table> 


.forDiv { 
width:100%; 
border:3px solid #236FBD; 
background-color: #236FBD; 
} 

.forTable{ 
width:100%; 
border:3px solid #236FBD; 
background-color: #236FBD; 
} 

firefoxでは、divは少し小さくなります。どうすれば修正できますか？

Answer 1

.forDiv { 
width:100%; 
border:3px solid #236FBD; 
background-color: #236FBD; 
-moz-box-sizing: border-box; 
} 

.forTable{ 
width:100%; 
border:3px solid #236FBD; 
background-color: #236FBD; 
-moz-box-sizing: border-box; 
} 

Answer 2

これは、width属性をどのように扱うか別のブラウザで矛盾だ - 彼らは幅がボーダー/パディング寸法を含めるかどうか、彼らはそれらを追加するかどうかを検討してください。

「ボーダーボックス」に設定された-moz-box-sizingアトリビュートを使用すると、Mozillaベースのブラウザに、QuirksモードでIEの動作をエミュレートするように指示できます（詳細はthis pageを参照）。

Answer 3

ほとんどの場合、隣接する要素または含まれている要素に設定されている余白やパディングと関係があります。完全な文脈なしで伝えるのは難しいですが、divとtableのマージンとパディング属性を設定してみて、何が起こるか見てみてください。

Answer 4

[OK]を、これは古典的なIEのボックスモデルの矛盾のように見える（または私はバグ、言おうか）

その周りの最も簡単な方法は、コンテナのdivの内側にあなたのdiv（DDDを含むもの）を定義することです

<div id="container"> 
    <div class="forDiv">ddd</div> 
</div> 

、次のようにCSSプロパティを定義します：このよう

#container 
{ 
    width:100%; 
} 

.forDiv 
{ 
    border: 3px solid; 
} 

これは、あなたのIEとGeckoの両方で同じ大きさを与える必要があります。

Answer 5

オーバーフローを試してください。 私も同じ問題がありました。その後、私は私がSOLN得たことから、この

link

を得ました。 divのオーバーフローを作る：隠され、それは私のためにうまくいった。