hasLayout
What is hasLayout?
Because Internet Explorer is so old (as it was one of the first browsers available), it hasn’t had the luxury of starting anew as current browser do. So as time went by, Microsoft began adapting new engines to make use of CSS. Seems fine… However, CSS changes the fundamental assumption that Internet Explorer’s engine is based on – anything significant is a rectangle which contains all its content.
So to deal with the new standards of CSS, Microsoft decided to fix their ancient engine by implementing the hasLayout property, instead of rebuilding IE. Every element in Internet Explorer now has a hasLayout property. Depending on the element, it is set to either true or false by default. If hasLayout is set to true – the element is an independent box that is responsible for rendering itself. If false – then the element relies on a parent element that has hasLayout set to true to render it. This is where a majority of IE bugs come to life.
Who has hasLayout?
<html> <body> <table> <tr> <th> <td> <iframe> <embed> <object> <applet> <img> <hr> <input> <button> <select> <textarea> <fieldset> <legend> and <marquee> are true by default, while all other elements are false. If you aren’t sure weather an element’s hasLayout is true or false, you can use the following JavaScript to determine so:
1 | alert(div.currentStyle.hasLayout); |
Make sure to replace div with the element’s ID attribute.
Setting hasLayout
Unfortunately, hasLayout isn’t an property you can simply declare in your css… Oh, if only it were that easy. So how do I change an element’s hasLayout then? There are certain CSS properties that, when declared, change the elements hasLayout.
Any of the following CSS properties will set the element’s hasLayout to true:
IE 4+
- position: absolute
- float: left or right
- display: inline-block
- width: any value other than auto
- height: any value other than auto
- zoom: any value other than normal
- writing-mode: tb-rl
IE 7+
- overflow: hidden/scroll/auto
- overflow-x: hidden/scroll/auto
- overflow-y: hidden/scroll/auto
- min-width: any value other than auto
- max-width: any value other than auto
- min-height: any value other than auto
- max-height: any value other than auto
These CSS properties, when declared, will set the element’s hasLayout to true.
Unsetting hasLayout
Because hasLayout is a read-only property, there is no way to set it to false other than not using CSS properties that set it to true. So once it’s set to true, you can’t set it to false.
This means you cannot set hasLayout to false on elements that are true by default. Luckily, most bugs in IE are caused by elements whose hasLayout is set to false.
Example
The following HTML and CSS are an example on how to give hasLayout to fix the peak-a-boo bug in IE6:
1 2 3 4 5 6 7 8 9 | <div id="contain">
<div id="float">
<p>Words</p>
<p>Words</p>
</div>
<p>This text will be disappear if contain's hasLayout property is false</p>
<div class="clearer"></div>
<p>This text will not disappear</p>
</div> |
1 2 3 4 5 6 7 8 9 10 11 | #contain { background: #333333; zoom: 1; } #float { float: left; width: 40%; } .clear { clear: both; } |
Because IE has issues with floats contained in elements that don’t have hasLayout set to true, giving the container a property of zoom:1 set’s hasLayout to true, fixing the peek-a-boo bug.
Other IE Bugs
hasLayout bugs often present themselves with the most bizarre issues. Chances are, if Internet Explorer is doing something it shouldn’t be doing, setting the hasLayout property to true will fix the problem (about 80% of the time).
July 13th, 2009 | CSS / Web Development |
Thanks, needed a simple basic understanding of hasLayout and how it effects CSS in IE. This was great thanks!
You have one too many closing braces in the last example. Might be confusing to some.
Thanks :)