Question

我知道Internet Explorer在传统上通过在总框宽度中包含填充和边框宽度来实现css框大小调整“错误”。当以标准兼容模式呈现页面并使用-ms-box-sizing属性实现CSS3框大小时，IE8 +“修复”此框大小调整。

但这里有趣。下面的代码渲染了一些具有各种宽度+填充+边框+框大小组合的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怪癖模式下，所有div输出的宽度都是相同的500px，正如IE的盒子大小的奇怪计算所预期的那样：

html code rendered in IE8 quirks mode

但是如果我在IE8标准合规模式中添加以下doctype声明来呈现：

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

输出变为：

enter image description here

请注意，最后一个框的渲染尺寸与第三个框的尺寸相同，即使使用css将box-sizing属性设置为border-box。我真的希望IE8在标准兼容模式下使用border-box方法，但是考虑到这个测试，我不知道如何实现它。有没有人有建议？

Answer 1

感谢Knyri的回答：

问题是我的IE8浏览器实例默认在IE 7标准模式下渲染，而不是8.（IE7不支持CSS3框大小。）我能够通过强制页面在IE 8标准中呈现来解决问题合规模式。我在html head标签中添加了以下内容：

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

除了title和其他元标记之外，它必须位于html head标记中的其他标记之前。这导致以下渲染：

enter image description here

正如您所看到的，前三个框使用内容框大小（W3C标准）进行渲染，第四个框使用border-box渲染，因为它是使用CSS显式设置的。

Answer 2

在标准模式下，它遵循正确的盒子模型。

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

在quirks模式下，CSS中的宽度和高度会影响标准模式下内容区域的宽度和高度以及边框的宽度和高度。

在ie8标准兼容模式下的css box-sizing

2 个答案: