hasLayout in Internet Explorer
Probably, you have already heard about the property hasLayout in IE and maybe you even know what it is and how it affects display of elements. No? Then let's have a closer look at this mysterious property.
hasLayout is used only in IE. It defines how an element is positioned in a stream, how it interacts with neighboring elements, it's response to an event. Generally speaking hasLayot is not a property. It determines whether the element has a layout property. Therefore, by saying "element has a property hasLayout", we actually mean the property layout.
Why do you need to know about hasLayout? Since it's responsible for the position of elements and how they are treated by other elements in the stream. Many problems in IE are caused by the presence or absence of a layout. So, if you learn how to detect the presence of hasLayout, and properly set it, this might resolve some of your current problems.
HTML elements that have hasLayout set by default: html, body, table, tr, td, th, img, button, textarea, select, fieldset, legend, hr, iframe, embed, object, applet, marquee.
For other elements, hasLayout can not be set directly. But you can set it indirectly. Some CSS properties if they have certain values can set hasLayout for elements. Here are these properties:
- position: absolute
- float: left | right
- display: inline-block
- width: any value other than auto
- height: any value other than auto
- zoom: any value other than normal (not validate)
- writing-mode: tb-rl (not validate)
- overflow: hidden | scroll | auto
- overflow-x | -y: hidden | scroll | auto
- position: fixed (for IE7)
- min-width | min-height: any value (for IE7)
- max-width | max-height: any value other than none (for IE7)
If you want to do it backwards, meaning to cancel element's hasLayout property, it is necessary to set value for any of the above properties, that doesn't result in layout. For example to set the width to auto.
Still in some ways most of these properties may have some affect on how an element works, this may cause some troubles. It is better to use zoom property with value set to 1. This works only in IE and has no significant affect other than hasLayout. It will not pass the validation, so it is better to specify this in some of the IE CSS files.
Now, in order to determine whether or not the element has property hasLayout you'll just need to look if it has layout by default, or whether properties that affect layout are installed.
As mentioned before, many IE bugs are caused by the presents or absents of hasLayout. Therefore, when searching for a solution to a problem first check hasLayout and if needed change it's status. If this doesn't help, find something else to blame.