In-depth understanding of IE haslayout

I accidentally read my previous articles and found that the css Study Notes series have not been updated for a long time. Laziness is sometimes terrible. It will Slowly swallow your fighting spirit and determination. If it weren't for a recent job change, you might not know when to think about it. There are not many things in the next few days, so I will make up the articles I have fallen behind. Recently I am going to update some advanced css articles, which will involve haslayout, BFC, and normal flow. In fact, it is not very good for me to master it, so I should study it in depth. Let's take a look at haslayout.

1. What is haslayout?

Layout is a private concept of windows IE. It determines how an element locates its content and calculates its size, and the relationship and interaction with other elements. When an element "has a layout", it is responsible for the size and positioning of itself and its child elements. If an element "has no layout", its size and position are controlled by the closest ancestor element with the layout.

It must be noted that IE8 and later browsers use a brand new Display Engine and do not use the haslayout attribute. Therefore, the haslayout attribute mentioned in this article is only for IE6 and IE7.

2. Why haslayout?

In theory, each element should control its own size and positioning, that is, each element should "have a layout". Of course, this is just an ideal state. For the early IE Display Engine, if all elements "have a layout", it will cause a lot of performance problems. Therefore, the IE development team decided to use the Layout Concept to reduce the browser performance overhead, that is, to apply the layout only to the elements actually needed, so there are two situations: "having layout" and "having layout.

3. layout elements by default

Next, let's take a look at which elements "have a layout" by default ".

        marquee

4. View and trigger haslayout

Haslayout is private to windows IE and is not a css attribute. We cannot explicitly set the haslayout of the element through css. However, we can use javascript to check whether an element has a layout:

This is a div

Alert (oDiv. currentStyle. hasLayout); // false is displayed.

If the element has a layout, obj. currentStyle. hasLayout returns true; otherwise, false. HasLayout is a read-only attribute, so it cannot be set through javascript.

In the actual development process, many IE display problems (IE6 and IE7) can be solved by triggering the haslayout element, the following lists some common attributes and methods that can trigger the haslayout element:

In IE7, the following attributes can also trigger the haslayout of an element.

5. Bugs caused by haslayout and Solutions

(1) many common floating bugs in IE.

(2) The element itself handles exceptions of some basic attributes.

(3) The relative positioning element has no layout.

(4) the margin of elements with layout is not superimposed.

......

Of course, there may be some bugs we have not found. In general, we will use zoom: 1; To trigger haslayout to solve these bugs, because zoom: 1 does not affect the existing performance of elements, although zoom: 1 cannot trigger haslayout in IE5.0, IE5.0 is no longer in our testing scope, so you can safely use zoom: 1. In addition, you can also use height: 1% to trigger in IE6 and earlier browsers. In IE7, you can use min-height: 0 to trigger. For more common bug solutions, refer to IE6 common bug solutions.

References:

Http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html

Http://www.smallni.com/haslayout-block-formatting-contexts/