Introduction to hasLayout in IE browser, haslayout in IE browser

Introduction to hasLayout in IE browser, haslayout in IE browser

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 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 ). To better understand CSS, especially CSS rendering in IE, haslayout is a very necessary concept. Most IE display errors are due to haslayout. 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. Attribute haslayout is set to true. Layout elements can be created by default or by setting some CSS attributes. If an html element has the haslayout attribute, the haslayout value of this element must be true, and haslayout is a read-only attribute that is irreversible once triggered.

You can use IE Developer Tollbar to check whether html elements in IE have haslayout. in 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 (incomplete list ):

* Body and html * 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 provides is 'performance and conciseness '. If all elements have a layout by default, it will have a harmful impact on performance and memory usage.

Most IE display errors of haslayout 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: (except normal) Internet assumer7 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.

For inline elements (by default, inline elements or display: inline elements), width and height trigger haslayout only in quirks mode of IE5.x and IE6 or later versions. 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 'displays: inline at the same time, its behavior is similar to the inline-block mentioned in the standard: the section is arranged horizontally and consecutively in the same way as the common text, influenced 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

Bug fixed in double blank edge floating bug in IE6 and earlier versions: display: inline;

IE5-6/win 3 pixel offset bug fixes: _ height: 1%;

IE6's peek-a-boo bug fix: _ height: 1%;