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. On the internet
In 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
Haslayout attribute. The attribute value can be true or false. When an element's haslayout
When the attribute value is true, we say this element has a layout (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
Content,
Instead of relying on the ancestor element to complete these tasks. Therefore, some elements have a layout by default. When we say that an element "Owns layout" or "gets layout", or an element
In "has layout", we mean that its Microsoft
Private
Haslayout is set to true. A "layout element" can be an element with layout by default, or an element with some
CSS attribute to get the layout element. 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 IE developer toolbar to view HTML under IE
Whether the element has haslayout. In the IE developer toolbar, the element has haslayout.
Is 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, Apple
TS, embed 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 * 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. For inline elements (default: inline elements, such as span, or display: inline ), Width and height are only triggered in ie5.x and IE6 or the quirks mode of the updated version. For
IE6: If the browser runs in standard compatibility mode, the inline element ignores the width or height attribute, so the width or height attribute is set.
In this case, the element cannot be ordered to have layout. 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 will be consistent with the inline-block mentioned in the standard.
Similar to the following: The paragraphs are arranged horizontally and consecutively in the same way as common texts.
Influence, 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 in other browsers
Display: inline is inline, 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 CSS for an element.
Zoom: 1. Zoom: 1 is used because, in most cases, it can stimulate the element without affecting the existing environment.
Haslayout. Once the problem disappears, you can basically determine the cause of haslayout. Then you can set the corresponding CSS
Attribute to correct this issue. 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 IE
. For IE7, set the minimum element height to 0 (min-Height: 0;) in the best way ;). Common Bugs caused by haslayout Problems Double blank edge floating bug in IE6 and earlier versions Bug fixed: Display: inline; 3 pixel offset bug for IE5-6/win Bug fixes: _ Height: 1%; The peek-a-boo bug of E6 Bug fixes: _ Height: 1%; |
