Make a div's total width the same in both Strict and Quirks mode

Question

Consider the following

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

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)

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

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

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)?

Answer 1

That's what the box-sizing attribute is there for. See this guide.

Answer 2

The only reliable way I can think of is to skip a few (or a lot) of CSS styles - borders for one. If you stick to the basics (divs with background colors for instance) and don't fiddle too much with paddings and margins you should be able to get a pretty consistant result.

On a side note - it is already quite hard to actually get the browsers to agree about how things look in one doctype, even strict.

Answer 3

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

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

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

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

i.e.

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

becomes

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