{"id":19749,"date":"2014-04-04T13:01:28","date_gmt":"2014-04-04T05:01:28","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19749"},"modified":"2025-04-04T01:43:52","modified_gmt":"2025-04-03T17:43:52","slug":"box-sizing-polyfills","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/box-sizing-polyfills\/","title":{"rendered":"How to Enable Box Sizing in Internet Explorer for Better Compatibility"},"content":{"rendered":"

Note:<\/strong> This post was first published on Apr 4, 2014.<\/p>\n

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

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

Both of the columns in the above screenshot have width<\/code>, height<\/code>, padding<\/code>, and box-sizing<\/code> specified. But since IE8 does not recognize the box-sizing<\/code> property, the second column is pushed down<\/strong> when their total width exceeds the parent container\u2019s width<\/strong>.<\/p>\n

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<\/strong>. If your website needs to support IE7 while also preserving CSS3 Box Sizing, you can use the following trick.<\/p>\n

\n\t\t\t\t\tUnderstanding HTML5 Shiv and Polyfills<\/span><\/a>\n
\n\t\t\t\t\t\t\t