Today, the Internet Explorer Box Model problem is mostly a non-issue. Most web developers place a <!DOCTYPE>
tag to enforce standards compliance, and nobody really cares about supporting Internet Explorer 5.5 anymore.
However, some developers have come up with subjective, conceptual arguments in defense of the IE box model. They've claimed that the IE box model is more "intuitive" than the W3C model, because the W3C model measures the content of the box, whereas the IE model measures the box itself:
I can see their point of view, but it's basically a subjective argument, and the most important thing is standards compliance.
However, recently I've come to prefer the IE box model for serious practical reasons. The W3C box model makes it difficult to dynamically resize an element to the exact onscreen pixel width of another element. The reason is that the style.width
property of an element doesn't account for the total onscreen size of the element: you also need to take into account any additional border and padding. This isn't a problem if both elements use the same CSS class - but if they have different CSS classes, this can become incredibly challenging.
Suppose we have two divs: A and B. A is hard-coded in the html as a 400px div, whereas B is dynamically created using Javascript. Visually, we want B to be the exact width of A. Under the old IE Box model, this is trivial. We simply say: B.style.width = A.style.width
, or even B.style.width = A.offsetWidth + "px"
.
But with the W3C box model, this isn't so simple. Now we also have to worry about style sheets. If B has the same CSS class as A, we can just say B.style.width = A.style.width
. But if it doesn't - and we might not want it to for aesthetic reasons - we're in trouble. Now we have to take into account the total pixels in the border and padding of both A and B. This can be particularly difficult if the border and padding are specified in inconsistent units (a common occurrence since border is often a 1px line, whereas padding might be specified in ems). Then we're faced with the quasi-impossible task of converting to a common unit (em to px or px to em). All of this just to get two divs to line up exactly on screen.
So basically, the W3C box model forces us to take into account CSS border and padding issues when we set the size of an element, whereas the IE box model doesn't, since the width measures the entire size of the box (end-to-end), rather than the content of the box. This makes it a lot easier to dynamically size elements in relation to each other.
All of this seems like a pretty powerful reason to favor the IE box-model over the W3C model (at least conceptually - of course in practice the IE box-model is dead).
Question: Why did the W3C choose this box model? Are there some advantages of the W3C box model that I'm simply not seeing? Or am I simply exaggerating the problem here?