html - 在 Strict 和 Quirks 模式下使 div 的总宽度相同

Question

考虑以下因素

<div style="width:150px;border:50px solid black">Test</div>

如果这是输出到 IE8 在严格模式下渲染的页面(或者如果您加载到 Firefox 等)，则 div 的内部(测试所在的白色区域)将是 150px 宽，但 div 总共将是50 + 150 + 50 = 250px 宽(占边框)

如果在 Quirks 模式下渲染，则宽度仅为 50 + 50 + 50 = 150px。

差异在于 Quirks 中宽度包括任何边框，如所解释的 here

如果您将 html 片段放到页面上，并且您事先不知道将使用哪种模式，是否有任何可靠的技巧(css/javascript 或其他)可以确保 div 具有相同的整体尺寸所有主要浏览器(IE6/7/8、Firefox、Opera、Chrome)上都支持 Strict/Quirks 模式吗？

Answer 1

我想我已经破解了(在 IE 6/7/8 怪癖和严格模式以及 FF3.5 上进行了测试)

仅当涉及填充/边框时，Quriks/Strict 模式的 div 宽度才会有所不同。

因此，创建一个外部 div 来设置宽度，然后创建一个带有边框的内部 div。

内部 div 受到外部 div 宽度的限制 - 并且两种怪异/严格模式都将呈现相同的大小。

即

<div style="width:150px;border:50px solid black">Test</div>

变成了

<div style="width:150px;">
   <div style="border:50px solid black">Test</div>
</div>