CSS, JavaScript and XHTML Explained

hasLayout July 3, 2007

HasLayout:

HasLayout is a Microsoft proprietary property that determines how IE will render the dimensions of an element. It’s a boolean read-only value that is either true or false. When an element’s hasLayout property is false, IE has rendering quirks. The most common quirks include disappearing text in IE, and the most common solution is the holly hack. I prefer using float.

Properties that trigger hasLayout for IE:

• display: inline-block; (even though IE won’t respect "inline-block" it will still trigger layout)
• height: any valid value except "auto"
• float: left or right (not none)
• position: absolute
• width: any valid value any value except "auto"
• writing-mode: tb-rl
• zoom: any valid value except "normal"

DOM for hasLayout:

• el.style.hasLayout
• el.currentStyle.hasLayout
• el.runtimeStye.hasLayout

Other hasLayout notes:

• body * { zoom:1 } would seem like a good idea, but elements with a zoom property set are a bit more expensive to render, so only add to necessary elements.
• removing hasLayout: hasLayout is a read only property, so you can’t set it to false in JavaScript. To set hasLayout to false, set with with CSS such as setting position: static, set zoom: normal;, float: none; etc.