How to Enable Box Sizing in Internet Explorer for Better Compatibility

Note: This post was first published on Apr 4, 2014.

We have covered CSS3 Box Sizing in a previous article. Box Sizing, with the value of border-box, allows us to keep the element width and height the same, no matter the added padding and border.

This makes measuring and defining element size easier. However, CSS3 Box Sizing does not work in Internet Explorer 7 (IE7) and earlier versions, as shown below.

Both of the columns in the above screenshot have width, height, padding, and box-sizing specified. But since IE8 does not recognize the box-sizing property, the second column is pushed down when their total width exceeds the parent container’s width.

You will have to adjust the size for each column accordingly to make them fit, which could be a very tedious task depending on the number of elements you need to handle. If your website needs to support IE7 while also preserving CSS3 Box Sizing, you can use the following trick.

Box Sizing Polyfill

To make IE8 (and below) acknowledge Box Sizing, we can use a polyfill. This polyfill comes in the form of an HTC file and is developed by Christian Schaefer. Download the file from the Github repository and place it in, for example, your CSS folder.

Create a CSS stylesheet specifically for Internet Explorer. Add the link in the HTML document this way so it will only be served in IE7.

<!--[if lte IE7]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->

Then put the following code in the ie.css. This CSS rule below will apply box-sizing to all elements.

behavior: url(css/boxsizing.htc);
}

A few things to note when applying this trick:

The URL path of boxsizing.htc must be relative to the HTML file’s location; otherwise, it will not work.

Paul Irish also has a tip to apply box-sizing in pseudo-elements with *:before, *:after. But, since IE7 and IE6 do not support pseudo-elements, there is no reason to use pseudo-element selectors in this case. As you can see above, we don’t include them in the code either.

The Result

Here, we have two columns with the parent container’s width set to 500px. The column widths are set to 50%, so each column should have a width of 250px, even though we also set padding for it. Let’s open Internet Explorer 7 and launch the Developer Tool (F12).

Go to the Layout tab of the Developer Tool to see the column size in detail. You should see that in IE7, the column now includes padding as well as borders as part of the total size. In our case, the box width remains at 250px.