Shared publicly  - 
After criticizing IE for their broken box model for years, web developers are now excited about a CSS option to use that model in all browsers. What's going on?
In December 1996 the W3C published CSS1, the first version of the CSS spec. It used this diagram to define a 'box model' of progressively larger boxes surrounding the content: ___________________...
Evghenii Maslennikov's profile photoWendall Cada's profile photoEdwin Aw's profile photoRoland DUFOUR's profile photo
Not sure if "excited" is the right word here. Some frameworks (like extjs) choose the IE box model just so it's one less variable across browsers.
This is exactly what CSS vendor prefixes are for! Every browser maker gets to implement their view of the world, then bleeding-edge web devs try things out, then the standard gets written. In my opinion, this made the CSS3 flexbox spec better, though it does take forever to get it done.

Too bad IE developers are arguing against vendor prefixes, though I guess that's not surprising at all.
The IE box model better, but IE's using it made the box models inconsistent between browsers, and inconsistency is way worse. The decision to support both models at once appears to have been made long ago; it's just that now someone's noticed enough old browsers have died off to use it.
The flaw of the original box model is not subtle. It is completely impossible to layout a page using the original box model if you want to completely fill the screen and no more, but it can be done with ie's model. The reason so many pages use tables for layout is due to the utter uselessness of the original box model for full screen layout.
+Peter Olszowka I don't believe that's true: with a pair of nested divs you can do everything the IE model does.
Give me an example with non-zero margin, border, and padding and the space divided into three portions of 20% / 30% / 50%.
+Peter Olszowka You should be able to do this with three divs with zero margin, padding, and border set with widths to 20%, 30%, and 50%, each containing another div with the desired margin, padding, and border.
How do I force the inner div to occupy the full space of the container div leaving room for margin, border, and padding?
I don't have access to my web server from work, so I can't show you right now, but now try putting something too wide to fit inside the left inner and specifying "overflow: auto". The box will just grow rather than display with a scroll bar because you really haven't constrained the width.
Also, on IE9 on Windows7, I got a horizontal scroll bar on the page for some window widths. I think that may be a browser bug due to using integer rather than floating arithmetic to do the width computations.
I think box-sizing:border-box is reintroduced just for convenience to use with CSS3 calculations (please look at the examples) not to recover a buggy (coincidental or intentional) misimplementation of standard box-model
Discussing who was right makes no sense, standards always have to be followed (even for arbitrary decisions) to ensure interoperability. This is a NEW choice in the standard, even when it matches de IE faulty box-model, it has now a purpose.
We derided IE because they were the only ones using it, and it wasn't optional. Having the OPTION to use it in all browsers is great, because it's behaviour can be expected & predicted.
This is a riot, I was just working on a project where I cognitive-dissonanced against the standard box model WRT combined width, right before I went to read CodeProject and found this post.
It's helpful to remember that up until Internet Explorer 5.5, Microsoft was mimicing what the leading browser did. Starting in 2001, with Internet Explorer 6, the box model followed the W3C CSS specification.
I don't really like changes to be honest. I admit IE's box model sounds better but I am a bit reluctant. All I'd like is to have all these games ended so we can really focus on semantics, good practices, etc.
Add a comment...