CSS: Internet Explorer bugs and hasLayout

CSS is treated differently in older versions of Internet Explorer (IE), mainly in 7 and 6. This post aims to be a little guide to the various rendering inconsistencies that you may encounter while developing for these browsers.

The hasLayout property

hasLayout is a read-only proprietary scripting property that was introduced in IE 5 back in 1999. Basically, this property is triggered by certain CSS properties, such as width, height or IE's zoom, and accepts only a Boolean value. When this property is true, a page element is said to have layout, whereas when hasLayout is set to false, a page element does not have layout.

Examples:

div#box {margin: 1em;} /* false */
div#banner {width: 600px;} /* true */

In IE 6, the first rule is prone to trigger some rendering bugs, such as margin collapsing bugs or floating bugs, while the latter is not, because in that case hasLayout is true. In IE 7, instead, the overwhelming majority of old bugs has been fixed, but you should not take this for granted while developing for this browser.

As a rule of thumb, to trigger hasLayout on block-level elements, you should always assign them a stated dimension. Generally, the declarations height: 1%, height: 1px; or min-height: 1px; (IE 7) do their job very well. Instead, on inline elements you should use the declarations zoom: 1.

For a complete list of IE's bugs, check out Position Is Everything. If you need some specific bugs, try out Gerard Talbot's web site or Bruno Fassino's tests.

hasLayout and JavaScript

As said above, this property is read-only. You can access its value through the following syntax:

element.currentStyle.hasLayout

To test if an element has layout or not, type the following in IE's address bar:

javascript:alert(document.getElementById('#test').currentStyle.hasLayout);