Understanding attributes of IE haslayout and debugging and solving related bugs

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 requires more cost to maintain itself and its content, rather than relying on the ancestor element to complete the work. Therefore, some elements 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 owned by default.
Layout element 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 the IE developer toolbar to check whether HTML elements in IE have haslayout. In the IE developer toolbar, elements with haslayout are usually displayed as "haslayout =-1 ".

By default, elements responsible for organizing their own content will have a layout, mainly including the following elements (this list is not detailed ):

• Body and HTML (in standards mode)
• Table, TR, Th, TD
• IMG
• HR
• Input, button, file, select, textarea, fieldset
• Marquee
• Frameset, frame, IFRAME
• Objects, applets, embed

Not all elements are deployed by default. The main reason Microsoft gives is "performance and ease of use ". If all elements have a layout by default, the performance and memory usage will be adversely affected.

How to trigger haslayout?

Most ie display errors can be corrected by triggering the haslayout attribute of the element. You can set the CSS size attribute (width/height) to trigger the haslayout of an element to "own the layout ". Set the following CSS attributes as follows.

• Display: inline-block
• Height: (any value before t auto)
• Float: (left or right)
• Position: absolute
• Width: (any value before t auto)
• Writing-mode: Tb-rl
• Zoom: (any value before t normal)

Note: Zoom and writing-mode are private properties of IE and cannot be verified by CSS.

IE7 also has the following additional attributes to trigger the haslayout of the element (this list is not detailed ):

• Min-Height: (any value)
• Max-Height: (any value before t none)
• Min-width: (any value)
• Max-width: (any value before t none)
• Overflow: (any value before t visible)
• Overflow-X: (any value has t visible)
• Overflow-Y: (any value has t visible)
• Position: fixed

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 of the element.
And 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, the best way is to set the minimum height of an element to 0 (min-Height: 0 ).

Common Bugs caused by haslayout Problems

• The floating element bilateral distance bug in IE6 and earlier versions
  Bug fixed: Display: inline;
• 3 pixel offset bug for IE5-6/win
  Bug fixes: _ Height: 1%;
• IE6's peek-a-boo bug
  Bug fixes: _ Height: 1%;

For more bugs in IE, see: http://positioniseverything.net/explorer.html

Reference: http://reference.sitepoint.com/css/haslayout#fntarg_5

Http://haslayout.net/haslayout