How to Enable Box Sizing in Internet Explorer 7 [Quicktip]

By . in Web Design. Updated on .

We have covered CSS3 Box Sizing in a previous article. Box Sizing, with the value of border-box, allows us to retain the element width and height, regardless of the additional padding and border it has.

This makes measuring and defining element size easier. However, CSS3 Box Sizing would not function in Internet Explorer 7 (IE7) and earlier versions, as you can see below.

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

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

Recommended Reading: A Look Into: HTML5 Shiv And Polyfills

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 put it in, for example, your CSS folder.

Create a CSS stylesheet, dedicated 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 for 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 files location, otherwise it will fail to work.

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

The Result

Here, we have two columns with the parent container’s width set to 500px. The column width are set to 50%, so each column should have 250px width, 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.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail