css - Why does Internet Explorer need the "hasLayout" flag?

Question

Like many developers working on web sites for Internet Explorer, I seem to come across a lot of bugs that are caused by the notorious hasLayout flag.

I understand what this flag does and how it works (for the most part). A good explanation I read the other day (although I can't find the source) is that hasLayout in IE essentially means "Make this element a rectangle."

It's obviously more complicated than that, but it's pretty well summed up with that (in my opinion).

What I don't understand is why the browser uses this flag. When looking for an answer, I found one that sounded logical:

Internet Explorer had to deal with very old legacy code from before CSS was really in full swing. As an architectural decision to make the browser easy to add CSS on to it, the hasLayout flag was used to trigger certain CSS properties so the page would be rendered correctly. This dates back to around the time of IE4.

This almost made sense to me, until I realized that Firefox (Netscape at the time) had to deal with the same problem. Netscape has been around for pretty much as long as Internet Explorer, however it doesn't need any internal hasLayout flag, or anything similar,as far as I know.

Seeing as how the hasLayout flag is the source of so many bugs in Internet Explorer, does anyone know why IE has this flag and other browsers don't need it?

This is something I'd like to know purely out of curiosity if anyone has any theories or happens to know the answer. I'd like to understand more about why (or why not) this flag is useful.

Answer 1

The Netscape renderer was completely re-written post-NS4. IE's "Trident" rendering engine got no such love. This made good business sense - IE continued to improve incrementally while NS was being re-written, and partially because of this (and partially because of its distribution arrangement...) managed to capture a huge share of the market...

But the end result is an old, crufty codebase which makes life hell for developers, who must consequently be painfully aware of what should be hidden implementation details.

Now, that last point is key: a browser's renderer is an abstraction, allowing you to create in a few lines of markup something that would take hundreds or thousands of lines of low-level rendering and event-handling code. And like all programming abstractions, it leaks a bit... This is true for IE, Netscape, Firefox, Opera, Webkit... And each browser has developers working feverishly to plug the leaks in the abstractions. Except, for five years, IE did not. Other leaks were plugged, but the rendering engine became more and more sieve-like.

Together, these to factors conspire to expose things like hasLayout.