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 怪癖模式呈现的 html 代码

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

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

输出变成这样：

在此处输入图像描述

请注意，最后一个框与第三个框的尺寸相同，即使 box-sizing 属性使用 css 设置为边框框。我真的希望 IE8 在标准合规模式下使用边框框方法，但是鉴于这个测试，我不知道如何实现它。有人有建议吗？

4

2 回答 2

3

感谢 Knyri 的回答：

问题是我的 IE8 浏览器实例默认以 IE 7 标准模式呈现，而不是 8。（IE7 不支持 CSS3 box-sizing。）我能够通过强制页面以 IE 8 标准兼容模式呈现来解决此问题。我在我的 html 头标签中添加了以下内容：

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

它必须在 html 头标签中的其他标签之前，除了标题和其他元标签。这导致以下渲染：

在此处输入图像描述

如您所见，前三个框使用 content-box box-sizing（W3C 标准）呈现，第四个使用边框框呈现，因为它是使用 CSS 显式设置的。

于 2012-05-31T19:28:39.557 回答
1

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

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

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

于 2012-05-31T16:41:29.597 回答