CSS Tutorial: A thorough understanding of haslayout

To better understand the CSS, especially in IE under the CSS rendering, haslayout is a very necessary to thoroughly understand the concept of removal. Most IE under the display error, is derived from haslayout.

What is Haslayout?

Haslayout is an internal component of the Windows Internet Explorer rendering engine. In InternetExplorer, an element either computes the size and organization of its own content, or relies on the parent element to compute the dimensions and organizational content. To adjust these two different concepts, the rendering engine takes the Haslayout attribute, and the property value can be true or false. When the Haslayout property value of an element is true, we say that the element has a layout (layout)

When an element has a layout, it is responsible for the size calculation and positioning of its own and possible descendant elements. In simple terms, this means that the element needs to be more costly to maintain itself and its contents, 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 "owns layout" or "gets layout", or that 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 a layout by default or an element that gets layout by setting some CSS properties. If an HTML element has a Haslayout attribute, then the haslayout value of the element must be true,haslayout only if the read-only property is triggered, it is irreversible. Through IE Developer Toolbar can see whether IE HTML element has haslayout, under IE Developer Toolbar, has the haslayout element, usually displays as "Haslayout =-1".

The element that is responsible for organizing its own content will default to a layout, consisting mainly of the following elements (incomplete lists):

* 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 have the default layout, Microsoft's main reason is "performance and simplicity." If all elements are laid out by default, they can have a detrimental effect on performance and memory usage.

How to motivate haslayout?

Most IE displays errors, which can be corrected by stimulating the haslayout attribute of the element. You can set the CSS dimension property (Width/height) to fire the element's haslayout so that it "owns the layout." As shown below, you can do this by setting the following CSS properties.

* 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 (incomplete 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

The 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 spans, or display:inline elements),

Width and height trigger haslayout only under ie5.x and IE6 or later versions of 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 order the element to have a layout in this case.

Zoom can always trigger haslayout, but it is not supported in IE5.0.

If an element with "layout" is display:inline at the same time, its behavior is similar to that of the standard Inline-block: In a paragraph, like normal text, in a horizontal direction and a continuous arrangement, affected by the vertical-align, And the size can be adaptively adjusted according to the content. This also explains why inline elements in Ie/win alone can contain block-level elements and less problematic, because in other browsers display:inline is inline, unlike Ie/win, once the inline element has layout, it becomes inline-block.

Debugging and solving of haslayout problem

When the Web page in IE has abnormal performance, you can try to motivate haslayout to see if it is the problem. A common method is to set zoom:1 for an element CSS. Zoom:1 is used because, in most cases, it can trigger the haslayout of elements without affecting the existing environment. And once the problem disappears, it can basically be judged as the cause of the haslayout. You can then modify the problem by setting the corresponding CSS properties. It is recommended that you first consider setting the Width/height attribute of the element, and then consider other attributes.

For IE6 and earlier versions, the commonly used method is called the holly Crack (Holly hack), which sets the height of this element to 1% (height:1%;). Note that this method fails when the overflow property of this element is set to visible. Or use IE's conditional annotation.

For IE7, the best method is to set the minimum height of the element to 0 (min-height:0;).

Common bugs caused by haslayout problems

IE6 and lower double margin floating bugs

Bug fixes: display:inline;

Ie5-6/win 3-pixel offset bug

Bug fixes: _height:1%;

E6 's hiding Cat (Peek-a-boo) bug

Bug fixes: _height:1%;