css - IE 怪癖模式和 IE 非怪癖模式之间 Div 宽度上的 CSS 问题

Question

我目前在 Quirks 模式和非 Quirks 模式(即 IE9 模式)下的页面之间遇到奇怪的不一致问题。在我的 CSS 中，我将其中一个 div 标签设置为宽度:100%，但是当我将同一个 div 标签放在两个不同的页面上时，它的行为是不同的。在非 quirks 模式下，div 标签的跨度会比 div 标签处于 Quirks 模式时稍长。当 CSS 完全相同时，我真的很难弄清楚为什么会出现这种不一致。有人对此有线索吗？

Answer 1

怪癖模式之前

在 CSS 1 和 2 中，W3C 规定 width 和 height 应仅描述元素“内容”的尺寸，而忽略其填充、边框、和边距，将围绕这些维度进行扩展。

但是，从版本 4 到 5.x 的 Internet Explorer 通过将填充和边框视为 width 和 `height:

的一部分来做不同的事情:

上图来自great Wikipedia article关于这个问题。

怪癖模式

Internet Explorer 6 按照 W3C 的规范修复了这个错误，但是改变这个行为会破坏许多依赖这个错误的网站的外观，所以引入了 Quirks Mode 以在怀疑旧页面时模拟旧版本的行为.

这就是为什么 Quirks 模式可以使相同的页面看起来不同，即使 CSS 完全相同，正如您所描述的:它会导致元素的大小不同，以模拟旧浏览器。这种不一致是有意的和预期的。微软有 a page详细介绍了 Internet Explorer 9 中的 Quirks 模式的效果。

CSS3

对于 CSS3，W3C 引入了一个名为 box-sizing 的属性，allows specifying this behavior .这与 Quirks 模式并没有真正的关系(因为 Quirks 模式忽略了 CSS3)，但我认为它可能值得一提，因为它与盒子模型有关。

做什么？

我的建议是避免怪癖模式。由于它带来的复杂性和非标准行为(既因为它不符合标准，也因为它对不同的浏览器意味着不同的东西)，它可能会为您节省大量工作来显示所有页面在相同的规则下。

这里有更多关于旧版本 Internet Explorer 的模拟以及如何设置它的信息:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?