回答:
IEは、より便利で標準ではない「境界ボックス」ボックスモデルを使用していました。このモデルでは、要素の幅にはパディングとボーダーが含まれます。たとえば、次の
#foo { width: 10em; padding: 2em; border: 1em; }
ようになります10em。
対照的に、すべての標準を恐れるブラウザは、デフォルトで「コンテンツボックス」ボックスモデルになります。このモデルでは、要素の幅にはパディングやボーダーは含まれません。たとえば、
#foo { width: 10em; padding: 2em; border: 1em; }
実際には16em幅が広くなります。10em+ 2em両側にパディング、+ 1em各エッジにボーダー。
有効なマークアップ、適切なdoctype、および適切なヘッダーを備えた最新バージョンのIEを使用する場合は、標準に準拠します。それ以外の場合は、次のようにして、最新の標準に準拠したブラウザに「ボーダーボックス」を使用するように強制できます。
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}最初の宣言はOperaに必要で、2番目はFirefox用、3番目はWebkitとChrome用です。
これは、ブラウザがサポートするボックスサイズ宣言をテストするために何年も前に行った簡単なテストです。http：//phrogz.net/CSS/boxsizing.html
Webkit（SafariおよびChrome）はpadding-box、宣言によるボックスモデルをサポートしていないことに注意してください。
単純なルールは、同じ要素にpadding / marginおよびwidthプロパティを使用しないようにすることです。つまり、これに似たものを使用します
<div class="width-div">
<div class="padding-div">
...........
...........
</div>
</div>私はこの質問にぶつかりました。2年前の質問ですが、誰かがこのスレッドにぶつかった場合に備えて、これを追加することを考えました。
CSS3には、box-sizingプロパティがあります。設定したら、
.bigbox {
box-sizing: border-box;
width: 1000px;
border: 5px solid #333;
padding: 10px;
}クラスの幅は1030pxではなく1000pxになります。もちろん、これは他の方法では解決できない問題を解決するため、液体divでピクセルサイズの境界線を使用するすべての人にとって非常に便利です。
さらに良いことに、ボックスサイズはIE7以下を除くすべての主要ブラウザでサポートされています。幅または高さの次元内にすべてのアイテムを含めるには、box-sizingをborder-boxに設定します。集約デフォルトで幅および/または高さ、に他の項目には、「コンテンツ・ボックス」のボックス・サイズを設定することができます。
ブラウザの構文の現在の状態はわかりませんが、-mozおよび-webkitプレフィックスを含めています。
.bigbox{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}doctypeが宣言されていますか？私がhtmlをコーディングし始めたとき、私はこの問題を抱えていました。それは、doctypeが宣言されていないことが原因でした。私のお気に入りは：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>