在“严格”和“怪癖”模式下使div的总宽度相同 [英] Make a div's total width the same in both Strict and Quirks mode

问题描述

请考虑以下

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

如果输出到IE8以严格模式呈现的页面上（或者如果加载到Firefox等），那么div（测试所在的白色区域）的内部将是150像素宽，但div总共将是50 + 150 + 50 = 250像素宽（占边框）

If this is output onto a page that IE8 renders in strict mode (or if you load into Firefox etc) then the inside of the div (the white area where test is) will be 150px wide but the div in total will be 50 + 150 + 50 = 250px wide (accounting for the border)

如果这是在怪异模式下渲染，那么它将只有50 + 50 + 50 = 150px宽。

If this is rendered in Quirks mode then it will only be 50 + 50 + 50 = 150px wide.

区别在于Quirks的宽度包括任何此处

The difference is in Quirks the width includes any border as explained here

如果你把一个html片段放在一个页面上，你不知道提前的时间将使用哪种模式有任何可靠的黑客（css / javascript或其他），将确保div具有相同的总体尺寸在两个严格/ Quirks

If you are putting a html fragment onto a page and you do not know ahead of time which mode will be used are there any reliable hacks (css/javascript or otherwise) that will ensure that the div has the same overall dimensions in both Strict/Quirks mode on all major browsers (IE6/7/8, Firefox, Opera, Chrome)?

推荐答案

我想我已经在所有主流浏览器（IE6 / 7/8，Firefox，Opera，它破解（在IE 6/7/8怪异和严格模式和FF3.5测试）

I think I've got it cracked (tested on IE 6/7/8 quirks and strict mode and FF3.5)

Quriks / Strict模式不同的div的宽度只有有padding / border involved。

Quriks/Strict mode differ on the width of a div only if there are padding/borders involved.

因此，使外部div设置宽度，然后设置一个内部div与边界。

So make an outer div to set the width, then an inner div with the border.

内部div受限于外部div的宽度，两种怪癖/严格模式将呈现相同的大小。

The inner div is constrained be the width of the outer div - and both quirks/strict modes will render the same size.

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

成为

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

这篇关于在“严格”和“怪癖”模式下使div的总宽度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！