zoloft pills

Switching between box models 2011

Do we all hate IE because the IE box model makes more sense?

For those who don’t know and are lazy to look it up, prior to IE 6, IE used to include border and padding in its calculation of the width (and height) of a page element. This is different than the “standard” W3C box model, which defines width as only the width of the content, not including padding and border.

Box Model?

In IE 6 and 7, you have to manually enable the W3C box model by adding a doctype. IE 8 uses the standard box model by default. This makes IE more consistent with other browsers.

However, a lot people find the old IE box model more intuitive. In fact, if you set a 100px width to an element, you want it to be 100px; nothing less, nothing more. You won’t want it to appear bigger and screw your page up when there’s padding and border.

You can actually enable the IE box model on other browsers by doing this:

1
2
3
4
5
6
7
8
/* enable good-old IE box model on all divs
** add to the selector for wider adoption
*/

div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

border-box means that the width (or height) is calculated border-to-border (border + padding + content width). The opposite (default) value is content-box.

Pretty cool huh?

Humm… not really. It’s only supported by IE8 (more on IE8 later), Webkit browsers (e.g. Chrome) and Mozilla browsers (e.g. Firefox). We’re missing IE6 and IE7.

Unless you don’t care about IE6 and IE7, I recommend that you don’t use border-box to switch your box model.

If you are one of the pioneers who don’t give a ____ on those bad browsers, you still need to watch out its strange behavior on IE8.

On IE8, border-box applies to width and height. It does not apply to min-width and min-height! That means if a container has a min-height, it’s going to exclude the padding and border in the calculation even if border-box is applied. The container will appear taller than expected in this case.

You can try it out on this test page: http://jsfiddle.net/XS2JF/. The one with border-box should be shorter, but they appear the same on IE8.

Conclusion: let’s not deal with box models anymore. It’s not yet 2013.

Category: interaction development  Tags:
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>