Issue with CSS on Div's width between IE Quirks Mode and IE non quirks mode

Question

I'm currently faced with a weird inconsistency issue between my pages that are in Quirks mode and in non Quirks mode (i.e. IE9 Mode). In my CSS, I set one of the div tag to have width:100%, but the behavior of the same div tag is different when I put it on the two different pages. In non quirks mode, the div tag will span slightly longer than when the div tag is in the Quirks mode. I'm really having trouble trying to figure out why there is this inconsistency when the CSS is exactly the same. Anyone has a clue on this?

Answer 1

Before Quirks Mode

In CSS 1 and 2, the W3C dictated that width and height shall describe only the dimensions of the "content" of an element, disregarding its padding, border, and margin, which would be added expanding around those dimensions.

However, Internet Explorer, from versions 4 through 5.x, did things differently by also considering padding and border as part of width and `height:

The above illustration is from a great Wikipedia article on the subject.

Quirks Mode

Internet Explorer 6 fixed this bug by following the W3C's specification, but changing this behavior would break the appearance of many websites that depended on this bug, so Quirks Mode was introduced to emulate the behavior of older versions if an old page was suspected.

That's why Quirks Mode can make the same page look different even if the CSS is exactly the same, as you described: it causes elements to be sized differently in order to emulate old browsers. The inconsistency is intentional and expected. Microsoft has a page detailing the effects of Quirks Mode in Internet Explorer 9.

CSS3

With CSS3, the W3C introduced a property named box-sizing that allows specifying this behavior. This doesn't really relate to Quirks Mode (since Quirks Mode ignores CSS3), but I thought it might be worth mentioning since it's related to the box model.

What to do?

What I recommend is to avoid Quirks Mode. With the complications it entails and its non-standard behavior (both in that it does not conform to standard and also in that it means different things to different browsers), it might save you a lot of work to bring all your pages to be displayed under the same rules.

Here's a great bit more about the emulation of old versions of Internet Explorer and how to set it:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?