css box-sizing in ie8 standards compliant mode

Question

I am aware that internet explorer has traditionally implemented css box sizing "wrong" by including padding and border widths in the total box width. IE8+ "fixes" this box sizing when a page is rendered in standards compliance mode and implements CSS3 box-sizing using the -ms-box-sizing property.

But here's something fun. The following code renders a few divs with various width + padding + border + box-sizing combinations:

<html>
<head>
    <style type="text/css">
        div { margin-bottom: 1em; background-color: #5555e9; }
        
        #test1 { width: 500px; }
        #test2 { width: 500px; padding: 10px; }
        #test3 { width: 500px; padding: 10px; border: 5px solid red; }
        #test4 { width: 500px; padding: 10px; border: 5px solid red;
            -ms-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="test1">Hello World!</div>
    <div id="test2">Hello World!</div>
    <div id="test3">Hello World!</div>
    <div id="test4">Hello World!</div>
</body>

In IE8 quirks mode, all the divs output with the same 500px width, as expected given IE's quirky calculation of box size:

html code rendered in IE8 quirks mode

But if I add the following doctype declaration to render in IE8 standards compliance mode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

the output becomes this:

enter image description here

Notice the last box is rendered with the same dimensions as the third box, even though the box-sizing property is set to border-box every which way using css. I really want IE8 to use the border-box method in standards compliance mode, but given this test I don't know how to make it happen. Does anyone have suggestions?

Jpnh Jpnh · Accepted Answer · 2012-05-31T19:28:39

Thanks to Knyri's answer:

The problem is my IE8 browser instance defaulted to rendering in IE 7 standards mode, not 8. (IE7 does not support CSS3 box-sizing.) I was able to fix the issue by forcing the page to render in IE 8 standards compliance mode. I added the following to my html head tag:

        <meta http-equiv="x-ua-compatible" content="IE=8"/>

It must come before other tags in the html head tag except for title and other meta tags. This results in the following rendering:

enter image description here

As you can see, the first three boxes render with content-box box-sizing (the W3C standard), and the fourth renders with border-box because it was explicitly set using CSS.

css box-sizing in ie8 standards compliant mode

2 Answers