{"id":2046,"date":"2012-08-01T16:42:53","date_gmt":"2012-08-01T15:42:53","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=2046"},"modified":"2013-01-15T17:36:00","modified_gmt":"2013-01-15T16:36:00","slug":"emulate-box-sizing-in-ie7","status":"publish","type":"post","link":"https:\/\/www.maratz.com\/blog\/archives\/2012\/08\/01\/emulate-box-sizing-in-ie7\/","title":{"rendered":"Emulate CSS box-sizing in IE7"},"content":{"rendered":"<p><a href=\"http:\/\/www.w3.org\/TR\/css3-ui\/#box-sizing\">Box-sizing<\/a> is a very handy <abbr>CSS<\/abbr> property supported in <abbr>IE8+<\/abbr> and all modern browsers. It\u2019s essential for flexible layouts development, because it helps you to combine percentage lengths for width and height with fixed value paddings.<\/p>\n<p>With box-sizing set to border-box, a 33% wide element with a padding of 20 pixels will take exactly 33% of horizontal space, instead of 33% + 20px + 20px which is rendered by default. Learn more about <abbr>CSS<\/abbr> box sizing on <a href=\"http:\/\/css-tricks.com\/box-sizing\/\">Chris Coyier\u2019s CSS Tricks<\/a> and <a href=\"http:\/\/paulirish.com\/2012\/box-sizing-border-box-ftw\/\">Paul Irish\u2019s<\/a> blogs.<\/p>\n<p>There are some existing JavaScript solutions to emulate this behavior in <abbr>IE7<\/abbr>, for instance the <a href=\"https:\/\/github.com\/Schepp\/box-sizing-polyfill\">box-sizing-polyfill<\/a>, but here is what we\u2019ve been using on a couple of recent projects:<\/p>\n<pre><code>.box-sizing-ie7 {\r\n    \/* emulates width: 100% *\/\r\n    width: expression((this.parentNode.clientWidth - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');\r\n}\r\n\r\n.box-sizing-ie7 {\r\n    \/* emulates width: 33% *\/\r\n    width: expression((this.parentNode.clientWidth\/3 - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');\r\n}<\/code><\/pre>\n<p>&#8230; and here\u2019s the example for the vertical sizing:<\/p>\n<pre><code>.box-sizing-ie7 {\r\n    height: expression((this.parentNode.clientHeight - parseInt(this.currentStyle['paddingTop']) - parseInt(this.currentStyle['paddingBottom'])) + 'px');\r\n}<\/code><\/pre>\n<p>This hack is not completely in line with <a href=\"http:\/\/stevesouders.com\/hpws\/rule-expr.php\">high performance guidelines<\/a>, so keep an eye on the <abbr>CPU<\/abbr>. Don\u2019t forget to put this in an <abbr>IE7<\/abbr> specific <abbr>CSS<\/abbr> file using <a href=\"\/blog\/archives\/2005\/06\/16\/essentials-of-css-hacking-for-internet-explorer\/\"><abbr>IE<\/abbr> conditional comments<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Box-sizing is a very handy CSS property supported in IE8+ and all modern browsers. It\u2019s essential for flexible layouts development, because it helps you to combine percentage lengths for width and height with fixed value paddings. With box-sizing set to border-box, a 33% wide element with a padding of 20 pixels will take exactly 33% [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[25,71,80],"_links":{"self":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2046"}],"collection":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=2046"}],"version-history":[{"count":0,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2046\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=2046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=2046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=2046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}