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

【问题标题】：css box-sizing in ie8 standards compliant modeie8标准兼容模式下的css box-sizing
【发布时间】：2023-03-23 12:20:01
【问题描述】：

我知道 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 对盒子大小的古怪计算：

但如果我添加以下 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 在标准遵从模式下使用边框框方法，但鉴于这个测试我不知道如何实现它。有人有建议吗？

【问题讨论】：

标签： internet-explorer css internet-explorer-8

【解决方案1】：

感谢 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 显式设置的。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

感谢您的回答 Knyri。但是，最后一个框呢，我在其中应用 -ms-box-sizing:border-box？我希望它遵循边界框模型而不是内容框（这是标准）。从我在各种资料中看到的内容来看，IE8 应该支持 box-sizing 属性，但这似乎不会在标准模式下发生。
奇数。当我在 IE8 浏览器模式和 IE8 标准文档模式下运行 IE9 时，它工作正常。如果您不知道，请在 IE 中按 F12 以获得漂亮的（尽管缺少）开发人员工具。我主要使用它来查看我的页面在不同版本的 IE 中如何呈现。
哦嗬！当我使用开发者工具时，我发现我的页面默认为 IE 7 标准模式！当我将其更改为 IE8 时，它工作正常。我熟悉开发人员工具，但不熟悉切换模式的能力。谢谢！