[Haslayout trigger mode] and [haslayout -- the culprit of CSS bug in IE] (from: http://hi.baidu.com/oxid/blog/item/8481e6a28128b3a0c

[Haslayout trigger method]   To implement transparency, HTML elements in IE must have layout. Such elements have the readable attribute haslayout and its value is true. The details are as follows: body,img,table,tr,th,tdAnd other elementshasLayoutAlwaystrue. typeIstext,button,fileOrselectOfinputOfhasLayoutAlwaystrue. Set{position:absolute}ElementhasLayoutIstrue Set{float:left|right}ElementhasLayoutIstrue Set{display:inline-block}ElementhasLayoutIstrue Set{height:xx}Or{width:xx}The element must be specific to one of the following two conditions:hasLayoutTotrue: In IE8 compatibility mode and earlier browsers than IE8displayThe value isblock, Such as demo3. The element is in compat mode. Set{zoom:xx}Element in the IE8 compatibility mode or in the browser before IE8hasLayoutIstrueBut it is not triggered in standard IE8 mode.hasLayout. Set{writing-mode:tb-rl}ElementhasLayoutIstrue. ElementcontentEditableThe property value istrue. In IE8 standard mode{display:block}ElementhasLayoutAlwaystrue, Such as demo8. For details about haslayout, refer to tracing ing Internet Explorer "haslayout" Overview and on having layout. Http://dancewithnet.com/2009/09/06/css-opacity/ Http://striblog.com /? P = 13 The culprit of the bug] What is haslayout? To better understand CSS, especially CSS rendering in IE, haslayout is a very necessary concept. Most ie display errors are due to 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 ). 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 ". Under what circumstances will haslayout not appear? Generally, this will not happen. Of course, except for the default haslayout elements listed below and those triggered using specific styles; It brings a variety of strange performances. When you find that IE7-has some incredible problems, you must first check whether haslayout is playing tricks; Haslayout only appears in IE7 and earlier versions. IE8 does not have the haslayout resolution mode. We only discuss the situation of specifying doctype. Triggering Conditions of haslayout: * Position: absolute (ie5 +) * Float: Left | right (ie5 +) * Display: inline-block (ie5 +) * Width: any value other than "Auto" (ie5 +; invalid for inline element) * Height: any value other than "Auto" (ie5 +; invalid for inline element) * ZOOM: any value other than "normal" (ie5.5 +; ie private attribute) * Writing-mode: Tb-RL (ie5 +; ie private attribute) * Overflow: hidden | scroll | auto (IE7; this attribute cannot be applied to elements that do not trigger haslayout in IE6 or earlier versions) * Overflow-x |-Y: hidden | scroll | auto (IE7; this attribute does not trigger haslayout in IE6 or earlier versions; this attribute is only supported in css3) * Min-width: any value (IE7; even if it is 0) * Max-width: any value other than "NONE" (IE7) * Min-Height: any value (IE7) * Max-Height: any value other than "NONE" (IE7) * Position: fixed (IE7) Clear or reset haslayout: * Position: static (ie5 +) * Float: none (ie5 +) * Display: any value other than "inline-block" (ie5 +) * Width | Height: "Auto" (ie5 +; invalid for inline) * ZOOM: "normal" (ie5.5 +; private attribute of IE) * Writing-mode: From 'tb-rl 'to 'lr-tb' (ie5 +; ie private attribute) * Max-width | max-Height: "NONE" (IE7) * Overflow: visible (IE7) Debugging and solving haslayout Problems When the webpage works normally in ff and has abnormal performance in IE7 or earlier versions, you can try to motivate haslayout to see if it is the 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 IE7, the best way is to set the minimum height attribute to 0. This technique is harmless, because 0 is the initial value of this attribute. And there is no need to hide this attribute from other browsers. 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.