0

Internet Explorer は従来、ボックスの合計幅にパディングと境界線の幅を含めることで、css ボックスのサイズ設定を「間違って」実装してきたことを認識しています。IE8+ は、ページが標準準拠モードでレンダリングされるときにこのボックスのサイズ変更を「修正」し、-ms-box-sizing プロパティを使用して CSS3 ボックスのサイズ変更を実装します。

しかし、ここで面白いことがあります。次のコードは、さまざまな幅 + パディング + ボーダー + ボックス サイズの組み合わせでいくつかの div をレンダリングします。

<html>
<head>
    <style type="text/css">
        div { margin-bottom: 1em; background-color: #5555e9; }
        
        #test1 { width: 500px; }
        #test2 { width: 500px; padding: 10px; }
        #test3 { width: 500px; padding: 10px; border: 5px solid red; }
        #test4 { width: 500px; padding: 10px; border: 5px solid red;
            -ms-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="test1">Hello World!</div>
    <div id="test2">Hello World!</div>
    <div id="test3">Hello World!</div>
    <div id="test4">Hello World!</div>
</body>

IE8 quirks モードでは、すべての div が同じ 500px 幅で出力されます。これは、IE の奇妙なボックス サイズの計算から予想されるとおりです。

IE8 quirks モードでレンダリングされた html コード

しかし、次の doctype 宣言を追加して、IE8 標準準拠モードでレンダリングするとします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

出力は次のようになります。

ここに画像の説明を入力

css を使用して box-sizing プロパティが border-box every way に設定されていても、最後のボックスは 3 番目のボックスと同じサイズでレンダリングされることに注意してください。IE8 が標準準拠モードでボーダー ボックス方式を使用することを本当に望んでいますが、このテストでは、それを実現する方法がわかりません。誰にも提案はありますか？

4

2 に答える 2

3

Knyriの答えに感謝します：

問題は、私の IE8 ブラウザー インスタンスがデフォルトで IE 8 ではなく IE 7 標準モードでレンダリングされることです (IE7 は CSS3 ボックスのサイズ変更をサポートしていません)。ページを強制的に IE 8 標準準拠モードでレンダリングすることで問題を解決できました。html head タグに以下を追加しました。

        <meta http-equiv="x-ua-compatible" content="IE=8"/>

タイトルやその他のメタ タグを除いて、html の head タグ内の他のタグの前に配置する必要があります。これにより、次のレンダリングが行われます。

ここに画像の説明を入力

ご覧のとおり、最初の 3 つのボックスは content-box box-sizing (W3C 標準) でレンダリングされ、4 つ目のボックスは CSS を使用して明示的に設定されているため、border-box でレンダリングされます。

于 2012-05-31T19:28:39.557 に答える
1

標準モードでは、正しいボックス モデルに従います。

---------------------------------------------
|  margin                                   |
|  ---------------------------------------  |
|  |Border                               |  |
|  |  ---------------------------------- |  |
|  |  |padding                         | |  |
|  |  | -----------------------------  | |  |
|  |  | |Content                     | | |  |
|  |  | |____________________________| | |  |
|  |  |________________________________| |  |
|  |_____________________________________|  |
|___________________________________________|

CSS の幅と高さは、標準モードではコンテンツ領域の幅と高さに影響し、quirks モードではボーダー ボックスの幅と高さに影響します。

于 2012-05-31T16:41:29.597 に答える