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.


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:


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


This entry was posted in by Gabriele Romanato. Bookmark the permalink.

One thought on “CSS: Internet Explorer bugs and hasLayout”

  1. The other classic way to trigger hasLayout - if you can't relatively position an element, for whatever reason - is to give it a height.

    Doesn't matter what height. Any height will do. I go for either 1% or 100%, but that'll give it layout, and make it behave. I've had lots of "exciting" bugs with background-images on list-items because of IE6's "layout" property.

    As you note, the concept of "layout" remains in IE7, despite their tidy-up of browser bugs, so it's still a useful thing to be able to trigger.

Leave a Reply

Note: Only a member of this blog may post a comment.