Haslayout attribute of Internet Explorer

Translated from the Internet Explorer haslayout Property

Http://jmedia.cn/

In a perfect world, we don't need to know what the haslayout attribute is. It is an internal component of the Windows Internet Explorer rendering engine. However, its role cannot be underestimated. It has a great influence on the appearance and behavior of elements, mainly for the constraints of element content and the interaction with adjacent elements.

This articleArticleInternet Explorer for Windows.

What is the haslayout attribute?

In Internet 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 the so-called 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 ). 1

When an element has a layout, it is responsible for size calculation and positioning of itself and potential child elements. 2. Simply put, this means that this element needs to spend more money 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, although most of them do not.

By default, elements responsible for organizing their own content will have a layout, mainly including the following elements (incomplete list ):

• Body and HTML (in standards mode)
• Table, TR, Th, TD
• IMG
• HR
• Input, button, file, select, textarea, fieldset
• Marquee
• Frameset, frame, IFRAME
• Objects, applets, 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.

So why do we need to care about this haslayout attribute? The reason is that many inconsistencies in the display of Internet Explorer can be attributed to this attribute.

In most cases, problems caused by the lack of layout with elements are easily discovered: The content is often misplaced or completely lost. For example, when an element (such as Div, which is not laid out by default) contains floating or absolutely positioned content, it usually shows strange and wrong behavior. This type of strange behavior can be varied, including missing or misplaced content, or element re-painting fails when the browser window moves or scrolls. 3

If you find that some of the content is not displayed, some webpages only show part of the content. These signs indicate that an element may need a layout. When the key elements are laid out, this problem disappears miraculously. In fact, the 99% Internet Explorer CSS bug encountered in daily development can be corrected by setting haslayout. Modify haslayout to declare a CSS attribute to make this element layout. If this element has no layout by default.

The easiest way to set a layout for an element is to set a CSS size attribute (for example, width or height ). However, in some cases, you may not want to set the specific width or height for the element, and some other CSS attributes can achieve the same effect.

These other attributes are:

• 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) 4

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) 5
• Position: fixed

Declaring any of these CSS attributes will give the elements a layout, provided that this attribute is valid for this element. For example, you cannot set the height of an embedded (Inline) element unless the document runs in quirks mode.

It is unwise to layout all elements-not only because of the performance and memory problems mentioned earlier, but also because of many other unnecessary CSS side effects. For example:

• When the child element of an absolute positioning or floating element has a layout, it will not contract the content in it.
• The static positioning content next to the floating element does not surround the floating element, but forms a rectangular block tied beside the floating element. More examples can be found on the msdn website.

Debugging of haslayout Problems

If you find that your webpage is abnormal in Internet Explorer, you can try setting a CSS attribute for an element to get the layout and see if the problem disappears. It is skillful to set which element. With the increase of experience, it is easy to determine. Generally, it is a parent container that does not explicitly set the width, or its width only defines the margin (margin ). If the parent element contains floating or absolute positioning elements, it may be the cause of the problem. If the parent object takes into account the problem of maintaining sub-objects, the problem may occur.

There is a useful way to debug the layout problem. Set the CSS attribute zoom to 1 one by one for the elements in the document to isolate the problematic elements. If you set this attribute for an element and solve the problem, you will succeed. Attribute Zoom is useful because it not only triggers the element to get the layout, but in most cases, setting this attribute does not change the page display (except the bug you are fixing ), other methods may be used. This division can quickly locate the problem.

Once you find the element that causes the problem, you can make necessary corrections. The best way is to set one or more CSS size attributes for this element. However, when the size attribute cannot be normally applied, you can only find an alternative solution.

For Internet Explorer 7, 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. There is no need to hide this attribute for other browsers, but this is not the case for our next suggestion!

The standard method for triggering an element layout in Internet Explorer 6 and earlier versions is to set the height attribute of this element to 1%, as long as the overflow attribute is not set (except visible ). This method utilizes a bug in these browsers, that is, if the overflow attribute is set to the default value visible, the height of the contained box will automatically expand according to the content in the box and ignore the original height value. However, most other browsers will respect the height of 1%, And you usually do not want them to do so, so this statement needs to be hidden from all other browsers.

In the past few years, this technology was set to 1% high and only visible to Internet Explorer 6 and earlier versions, known as Holly hack ). Now, we recommend that you declare CSS for Internet Explorer only by using conditional annotations.

The good news is that Internet Explorer 7 is much better than previous versions, and many (though unfortunately not all) problems related to layout have disappeared. Compared with previous browsers, you will need much less repair. For more information about the layout, see "about layout" on the satzansatz website ".

Footer

1. Once an element has a layout, its haslayout attribute can be queried by the rendering engine and script.
2. If a child element has a layout, it will calculate the size of itself and its child element, but its positioning is determined by its parent element.
3. Detailed descriptions of these behavior examples can be found at position is everything website at http://positioniseverything.net/assumer.html.
4. the zoom and writing-mode attributes are proprietary CSS attributes of Internet Explorer. Therefore, if you use them, CSS authentication is not passed.
5 overflow-X and overflow-y are proposed attributes of css3, but they are available from Internet Explorer 5.