CSS Haslayout thoroughly understand

To better understand CSS, especially the rendering of CSS under IE, Haslayout is a very necessary concept to be thoroughly clarified. Most of the display error under IE, is originated from Haslayout.

What is Haslayout?
Haslayout is an internal component of the Windows Internet Explorer rendering engine. In InternetExplorer, an element either calculates the size and organization of its own content, or relies on the parent element to calculate dimensions and organize content. To adjust these two different concepts, the rendering engine takes the Haslayout property, which can be either true or false. When the Haslayout property value of an element is true, we say that the element has a layout
When an element has a layout, it is responsible for sizing and positioning itself and possible descendant elements. In short, this means that the element needs to spend more to maintain itself and its content, rather than relying on ancestral elements to do the work. Therefore, some elements will have a layout by default. When we say that an element "has layout" or "Get Layout", or an element "has layout", we mean that its Microsoft proprietary attribute Haslayout is set to true. A "layout element" can be an element that has layout by default or an element that gets layout by setting some CSS properties. If an HTML element has the Haslayout attribute, then the value of the element's haslayout must be only true,haslayout as a read-only property, and once triggered, it is irreversible. Through IE Developer Toolbar can see whether the HTML element under IE has haslayout, under IE Developer Toolbar, have haslayout elements, usually displayed as "haslayout =-1".
The element that is responsible for organizing its own content will have a layout by default, consisting mainly of the following elements (incomplete list):
* Body and HTML
* table, TR, TH, TD
* img
* HR
* Input, button, file, select, textarea, fieldset
* Marquee
* Frameset, Frame, IFRAME
* Objects, applets, embed
For not all elements are laid out by default, Microsoft's main reason is "performance and simplicity." If all elements have layouts by default, they can have a detrimental effect on performance and memory usage.
How to inspire Haslayout?
Most IE display errors can be corrected by firing the Haslayout attribute of the element. You can fire the haslayout of an element by setting the CSS Dimension property (Width/height), so that it "owns the layout." You can do this by setting the following CSS properties, as shown below.
* Display:inline-block
* Height: (any value except Auto)
* Float: (left or right)
* Position:absolute
* Width: (any value except Auto)
* WRITING-MODE:TB-RL
* Zoom: (any value except normal)
Internet Explorer 7 also has some additional attributes (not a complete list):
* Min-height: (any value)
* Max-height: (any value except none)
* Min-width: (any value)
* Max-width: (any value except none)
* Overflow: (any value except visible)
* Overflow-x: (any value except visible)
* Overflow-y: (any value except visible)
* position:fixed
Overflow-x and overflow-y are attributes in the CSS3 box model and are not widely supported by browsers.
For inline elements (the default is inline elements, such as span, or display:inline; elements),
Width and height only trigger haslayout under ie5.x and IE6 or later in quirks mode. For IE6, if the browser is running in standard compatibility mode, the inline element ignores the width or Height property, so setting width or height cannot be ordered in this case to have layout of the element.
Zoom can always trigger haslayout, but it is not supported in IE5.0.
If the element with "layout" is display:inline at the same time, its behavior is similar to that of the standard Inline-block: in the same way as normal text in the paragraph, the horizontal and continuous arrangement, affected by vertical-align, And the size can be adjusted according to the content adaptive. This can also explain why inline elements in Ie/win alone can contain block-level elements that are less problematic, because Display:inline is inline in other browsers, unlike Ie/win, which becomes inline-block once inline elements have layout.
The debugging and solving of haslayout problem
When the Web page in IE has abnormal performance, you can try to fire haslayout to see if the problem lies. A common method is to set zoom:1 for an element of CSS. Zoom:1 is used because, in most cases, it can fire the haslayout of an element without affecting the existing environment. And once the problem disappears, that's basically the reason why you can judge Haslayout. You can then fix the problem by setting the appropriate CSS properties. The first thing to consider is the Width/height attribute of the set element, followed by other attributes.
For IE6 and earlier, the usual method is known as the Holly Hack (Holly hack), which sets the height of the element to 1% (height:1%;). It is important to note that this method is invalidated when the overflow property of this element is set to visible. Or use the conditional comment of ie.
For IE7, the best way to set the element's minimum height is 0 (min-height:0;).
Common bugs caused by haslayout problems
Double blank Edge floating bug with IE6 and lower versions
Bug fix: display:inline;
Ie5-6/win 3-pixel offset bug
Bug fix: _height:1%;
E6 's hiding Cat (Peek-a-boo) bug
Bug fix: _height:1%;