Ie compatibility --- haslayout, ie --- haslayout

Ie compatibility --- haslayout, ie --- haslayout

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 InternetExplorer, 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 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 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 (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

Therefore, although some of these attributes are inline elements, you can set your own width and height.

Not all elements are deployed by default. The main reason Microsoft gives 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 to "own the layout ". Set the following css attributes as follows.

* Display: inline-block (applicable to all mainstream browsers)

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

 

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: it is arranged in the same continuous manner as the normal text in the paragraph, 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.

A classic example:

The non-floating outer div is not supported by the height of the floating element in it. The height of the non-floating outer div is not automatically calculated. Next, we will add a zoom: 1; to trigger the hasLayout attribute of this non-floating div. At this time, the outer div is opened by the floating div of the inner layer. Of course, this applies only to ie6 and ie7, for standard browsers such as firefox that comply with the standard, overflow: hidden can be added; for example, display: table, or pseudo element: after can be used to solve the problem.

See: http://xiaogai1010.blog.163.com/blog/static/13717030820122242616468/

 

HasLayout can also have an effect on inline elements. When hasLayout of an inline element is true, you can set the height and width for this inline element and get the expected effect.

(1) You can use zoom: 1 to trigger the haslayout attribute for the inline element to calculate its height and width, but this applies only to ie6 and ie7.

(2) display: inline-block: triggers the haslayout attribute of the inline element. It is applicable to all mainstream browsers.

 

Debugging and solving haslayout Problems

(1) When the webpage has abnormal performance in IE, you can try to inspire 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.

(2) Sometimes the haslayout attribute is triggered, and the layout of the element fails in ie6 and ie7. You need to use the toolbar of the ie ins to check whether the element triggers the haslayout attribute, if triggered, you can remove attributes such as width and height, float, and position to remove the haslayout attribute. Then, you can browse the webpage on the page to find out the problem.