What does haslayout mean?

To better understand css, especially css rendering in IE, haslayout is a concept that needs to be completely cleared. Most IE display errors are due to haslayout. What is haslayout? Haslayout is an internal component of the Windows Internet Explorer rendering engine. In Internet Explorer, an element

To better understand css, especially css rendering in IE, haslayout is a concept that needs to be completely cleared. Most IE display errors are due to haslayout.

What is haslayout?

Haslayout is an internal component of the Windows Internet Explorer rendering engine. In Internet Explorer, an element either calculates the size and organization of its own content, or relies on its parent element to calculate the size and organization content. To adjust these two concepts, the rendering engine uses the hasLayout attribute. The attribute value can be true or false. When the hasLayout attribute value of an element is true, we say that this element has a layout)

When an element has a layout, it is responsible for size calculation and positioning of itself and potential child elements. Simply put, this means that this element needs to spend the cost to maintain itself and its content, rather than relying on the ancestor element to do this. Therefore, some elements have a layout by default. When we say that an element owns layout or gets 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 owns layout by default or an element that gets layout by setting certain CSS attributes. If an HTML element has the haslayout attribute, the haslayout value of this element must be true. haslayout is a read-only attribute that is irreversible once triggered. You can use IE Developer Toolbar to check whether HTML elements in IE have haslayout. in IE Developer Toolbar, haslayout elements are usually displayed as haslayout =-1.

By default, elements responsible for organizing their own content will have a layout, mainly including 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, and embed

Not all elements are deployed by default. The main reason Microsoft provides is performance and conciseness. If all elements have a layout by default, it will have a harmful impact on performance and memory usage.

How to activate haslayout?

Most IE display errors can be corrected by stimulating the haslayout attribute of the element. You can set the css size attribute (width/height) to stimulate the haslayout of an element, so that it has a layout. Set the following css attributes as follows.

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

Overflow-x and overflow-y are attributes in the css3 box model, which are not widely supported by browsers.

For inline elements (default: inline elements, such as span, or display: inline ),

Width and height are only triggered in IE5.x and IE6 or the quirks mode of the updated version. For IE6, if the browser runs in standard compatibility mode, the inline element ignores the width or height attribute. Therefore, setting width or height cannot enable layout for this element.

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

If an element with layout is displayed: inline at the same time, its behavior is similar to the inline-block mentioned in the standard: in a paragraph, it is arranged horizontally and consecutively like a common text, affected by vertical-align, And the size can be adjusted according to the content. This can also explain why inline elements in IE/Win can contain block-level elements, because display: inline is inline in other browsers, unlike IE/Win, once an inline element has layout, it will become inline-block.

Debugging and solving haslayout Problems

When the webpage has abnormal performance in IE, you can try to stimulate haslayout to see if it is a problem. A common method is to set zoom: 1 for an element css. Zoom: 1 is used because in most cases, it can stimulate the haslayout of an element without affecting the existing environment. Once the problem disappears, you can basically determine the cause of haslayout. Then you can set the corresponding css attribute to correct this problem. We recommend that you first set the width/height attribute of the element, and then consider other attributes.

For IE6 and earlier versions, the common method is Holly hack, which sets the height of this element to 1% (height: 1% ;). It should be noted that when the overflow attribute of this element is set to visible, this method will become invalid. Or use the IE conditional annotation.

For IE7, set the minimum element height to 0 (min-height: 0;) in the best way ;).

Common Bugs caused by haslayout Problems

Double blank edge floating bug in IE6 and earlier versions

Bug fixed: display: inline;

3 pixel offset bug for IE5-6/win

Bug fixes: _ height: 1%;

The peek-a-boo bug of E6

Bug fixes: _ height: 1%;

Sugar companion tomato said that this article is not original, it is a summary of online resources, coupled with a comprehensive understanding. It may not be comprehensive, and further details are needed.