CSS tutorial: study haslayout carefully

Source: Internet
Author: User



Author: anonymous name
Source: webpage tutorial Network


[Introduction]

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.




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%;

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.