考虑以下
<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模式？
答案 0 :(得分：2)
我想我已经破解了（在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>
答案 1 :(得分：1)
这就是box-sizing属性的含义。请参阅this guide。
答案 2 :(得分：0)
我能想到的唯一可靠的方法是跳过一些（或很多）CSS样式 - 一个边框。如果您坚持基础知识（例如，具有背景颜色的div）并且不会过多地填充填充和边距，那么您应该能够获得相当一致的结果。
另一方面 - 实际上很难让浏览器就一个doctype中的内容看起来是一致的，甚至是严格的。