UGTS Document #19 - Last Modified: 8/29/2015 3:23 PM
Internet Explorer hasLayout Bugs

A commonly appearing bug in Internet Explorer which has been around since IE6 and is still causing trouble even in IE9 involves the hasLayout Boolean property on a container.

The bug in simple terms is that if an HTML element has hasLayout = false, then in some cases its child elements may not draw correctly. They might disappear when you resize or scroll the window because IE will not redraw them, or they might redraw themselves in the wrong place. They might be positioned incorrectly, or they might not display at all. The bug will go away if the parent container has hasLayout = true.

Here is an MSDN article describing the hasLayout property. Normally you would not have to be concerned about it, since it is an internal implementation detail of Microsoft's IE browser, but things will go much easier for you if you do know about it - what it does, how it works, and how it breaks.

hasLayout is not a property that you can set directly, like 'width' or 'position' or a hundred other CSS attributes. Rather, it is an internal property which is turned on by default for some kinds of elements such as 'table' and left off by default for some other kinds of elements such as 'div'. Setting certain CSS attributes causes IE to turn it on for an element which would otherwise have it set to false. The most commonly used CSS attribute that you can use to set hasLayout = true without having any other noticable side effects is the style='zoom:1;' attribute.

Here is an example of a simple HTML page which will disappear if you resize the screen, in IE6 even up to IE9.  The problem does not occur in Firefox or Chrome:

<html><head><title>Test</title></head><body>
<div style="position: relative">
<div style="width:600px">
<div style='position: absolute;'>
    This text will disappear if you resize your Internet Explorer window.
</div>
</div>
</div>
</body></html>


To see the bug, save the above snippet to an HTML file and then view it in IE and resize the window. The problem will go away if you add the zoom style to the first div, because then you force the parent div container to have hasLayout = true:

<html><head><title>Test</title></head><body>
<div style="position: relative; zoom:1;">
<div style="width:600px">
<div style='position: absolute;'>
    This text will disappear if you resize your Internet Explorer window.
</div>
</div>
</div>
 </body></html>


Note that in the first example above, enforcing standards mode by using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> does not help, the content will still disappear on resize.  And running in IE8 compatibility mode will not help either - only enforcing hasLayout on the first div container is a guaranteed way to make the problem disappear in IE.

There are many other ways to ensure that the parent div has hasLayout = true, including setting a width or changing position to absolute.  However, the zoom = 1.0 property is commonly recognized as the one having the least side effects.