ie compatible-haslayout_html/css_WEB-ITnose

To better understand css, especially the rendering of css under IE, haslayout is a concept that needs to be thoroughly understood. Most display errors under IE are caused by 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 organizes its own content, or relies on a parent element to calculate the size and organize the content. In order to reconcile these two different concepts, the rendering engine uses the hasLayout attribute, which can be true or false. When an element's hasLayout attribute value is true, we say that the element has a layout

When an element has a layout, it is responsible for size calculation and positioning of itself and possible descendant elements. Simply put, this means that the element needs to spend more time maintaining itself and its contents, rather than relying on ancestor elements to do this work. Therefore, some elements will have a layout by default. When we say that an element "has layout" or "gets layout", or that an element "has layout", we mean that its Microsoft-specific property hasLayout is set to true. A "layout element" can be an element that has a layout by default or an element that has a layout by setting certain CSS properties. If an HTML element has haslayout attribute, then the value of haslayout of this element must be only true. haslayout is a read-only attribute. Once triggered, it is irreversible. You can check whether HTML elements under IE have haslayout through IE Developer Toolbar. Under IE Developer Toolbar, elements with haslayout are usually displayed as "haslayout = -1".

The elements responsible for organizing their own content will have a layout by default, which mainly includes the following elements (not a complete list):

* body and html

* table, tr, th , td

* img

* hr

* input, button, file, select, textarea, fieldset

* marquee

* frameset, frame, iframe

* objects, applets, embed

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

The main reasons given by Microsoft for not all elements having layouts by default are "performance and simplicity". If all elements were laid out by default, it would have a detrimental impact on performance and memory usage.

How to activate haslayout?

Most IE display errors can be corrected by activating the haslayout attribute of the element. You can activate the element's haslayout by setting the css size attribute (width/height), etc., so that it "has layout". Just set the following css properties as shown below.

* display: inline-block (works in all major 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 properties (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 Value)

　* position: fixed

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

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 very similar to the inline-block mentioned in the standard: it is arranged continuously in the paragraph like ordinary text, subject to vertical-align Effect, and the size can be adjusted adaptively according to the content. This can also explain why in IE/Win alone, inline elements can contain block-level elements with less problems, because in other browsers, display: inline means inline, unlike IE/Win, once the inline element has a layout, it still has a layout. Will become inline-block.

A classic example:

The non-floating outer div is not stretched by the height of the floating element inside, and the height of the outer non-floating div is not automatically calculated. Let's add a zoom:1; to this non-floating div to trigger its hasLayout attribute. At this time, the outer div is stretched by the inner floating div. Of course, this only applies to ie6 and ie7, and for compliance with standards Standard browsers such as Firefox can add overflow: hidden; display: table, or use the pseudo element: after to solve the problem.

For details, 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 of the inline element and get the desired effect.

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

(2) display:inline-block, triggers the haslayout attribute of inline elements, applicable to all mainstream browsers.

Debugging and solving haslayout problems

(1) When the web page behaves abnormally in IE, you can try to activate haslayout to see if the problem is there. A common method is to set zoom:1 to the css of an element. Zoom:1 is used because in most cases it fires the element's haslayout without affecting the existing environment. Once the problem disappears, it can basically be determined that it is the cause of haslayout. Then you can correct this problem by setting the corresponding css properties. It is recommended that the first thing to consider is to set the width/height attributes of the element, and then consider other attributes.

(2) Sometimes it is because the haslayout attribute is triggered, causing problems with the layout of elements under ie6 and ie7. This requires using the Developer Toolbar of the IE plug-in to see whether the element has triggered the haslayout attribute. If so, , you can remove its width, height, float, position and other related attributes, thereby removing the haslayout attribute, and then browse the web page to find out the problem.