在CSS Quirks模式和IE非怪癖模式之间的Div宽度问题上使用CSS

Question

我目前在Quirks模式和非Quirks模式（即IE9模式）的页面之间遇到了一个奇怪的不一致问题。在我的CSS中，我将div标签中的一个设置为宽度：100％，但是当我将它放在两个不同的页面上时，相同div标签的行为是不同的。在非怪癖模式下，div标签的延伸时间比div标签处于Quirks模式时要长。当CSS完全相同时，我真的很难弄清楚为什么会出现这种不一致的原因。任何人都有这方面的线索吗？

Answer 1

在Quirks模式之前

在CSS 1和2中，W3C规定width和height仅描述元素“内容”的维度，忽略其填充，边界和边距，这将是增加了围绕这些方面的扩展。

然而，从版本4到5.x的Internet Explorer，通过考虑填充和边框作为width和`height：

的一部分，做了不同的事情。

上图来自great Wikipedia article主题。

怪癖模式

Internet Explorer 6通过遵循W3C规范修复了此错误，但更改此行为会破坏许多依赖此错误的网站的外观，因此引入Quirks模式以模拟旧版本的行为，如果怀疑旧页面

这就是为什么Quirks模式可以使同一页面看起来不同，即使CSS完全相同，如您所述：它会导致元素的大小不同，以便模拟旧的浏览器。不一致是有意和预期的。 Microsoft已a page详细说明了Internet Explorer 9中Quirks Mode的影响。

CSS3

使用CSS3，W3C引入了一个名为box-sizing allows specifying this behavior的属性。这与Quirks模式没有关系（因为Quirks模式忽略了CSS3），但我认为值得一提，因为它与盒子模型有关。

怎么办？

我建议避免使用Quirks模式。由于它带来的复杂性及其非标准行为（因为它不符合标准，并且它对不同的浏览器意味着不同的东西），它可能会为您节省大量工作以显示所有页面根据相同的规则。

以下是关于仿旧旧版Internet Explorer以及如何设置它的更多信息：
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?