Shulou(Shulou.com)06/03 Report--

In the IE browser to start CSS haslayout properties, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

We all know that browsers have bug, and IE seems to have more bug than most browsers. One of the reasons why IE behaves differently from other browsers is that the display engine uses an internal concept called layout.

Because layout is a concept specific to the way the display engine works inside, you don't need to know about it in general. However, layout problems are at the root of many IE display bug, so understanding this concept and how it affects CSS is helpful in repairing bug.

What is haslayout

Haslayout is an internal part of the Windows Internet Explorer rendering engine. In Internet Explorer, layout concepts are used to control the size and positioning of elements. Ideally, all elements control their own size and positioning. However, this can cause significant performance problems in IE. As a result, the IE development team decided to apply the layout only to those elements that actually needed it, thus fully reducing performance overhead.

Elements that have a have layout are responsible for the size and positioning of themselves and their child elements. If an element does not have a layout, its size and location are controlled by the nearest ancestor element that owns the layout. The IE display engine uses layout concepts to reduce its processing overhead. An element either sizes and organizes its own content, or relies on the parent element to calculate the size and organize the content.

To adjust these two different concepts, the rendering engine uses the property of hasLayout, which can be true or false. When the hasLayout attribute value of an element is true, we say that the element has a layout, and when an element has a layout, it is responsible for sizing and positioning itself and possible descendant elements. Simply put, this means that the element costs more to maintain itself and its contents, rather than relying on ancestral elements to do the work. Therefore, some elements have a layout by default. When we say that an element "owns layout" or "gets layout", or an element "has layout", we mean that its Microsoft proprietary attribute hasLayout is set to true. A "layout element" can be an element that has layout by default or an element that gets layout by setting some CSS attributes. If a HTML element has a haslayout attribute, then the value of the element's haslayout must have only true,haslayout as a read-only attribute. Once triggered, it is irreversible. Through IE Developer Toolbar, you can check whether the HTML element under IE has haslayout. Under IE Developer Toolbar, the element with haslayout is usually displayed as "haslayout =-1".

2. Have haslayout attribute by default

,

,

,

Third, the trigger mechanism of hasLayout layout under IE.

To get back to business, to this end, we need to know hasLayout, understand it, and then we can better find a solution to the problem.

First of all, we need to understand what the Layout and hasLayout properties are.

Layout, which means "layout", is a unique concept under IE/Windows, which determines how elements locate and size their content, their relationship and interaction with other elements, and their impact on applications and users. HasLayout is a read-only attribute, and it is irreversible for elements that do not have Layout if their Layout is passively triggered.

HasLayout is an internal part of the IE rendering engine. In IE, an element calculates the size and organization of content, either sizing and organizing its own content, or relying on the parent element to size and organize the content. To adjust these two different concepts, the rendering engine uses the property of hasLayout, which can be true or false. When the value of the hasLayout attribute of an element is true, we say that the element has a Layout.

According to incomplete statistics, the default HTML tag elements with haslyout are:,

、 、 、

、

、

、 、

, etc.

When a web page has abnormal behavior in IE, you can first try to fire haslayout to determine whether the Layout of the current container is not fired.

Next, let's see how to fire the hasLayout attribute of the element. The following is "Lonely bitch."

1. The properties of haslayout that can be obtained by setting CSS 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);, 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; (incomplete statistics).

2. For inline elements (the default is inline elements, such as span, or display:inline; elements), width and height only trigger hasLayout under IE5.x and IE6 or later quirks mode. For IE6, if the browser is running in standard compatibility mode (a mode with Doctype), the inline element ignores the width or height attribute, so setting width or height does not order the element to have layout in this case.

3. Zoom can always trigger hasLayout, but it is not supported in IE5.0.

4. For IE6 and earlier versions, the common method is called Holly Holly hack, which sets the height:1%; of this element. It is important to note that this method is invalid when the element's overflow attribute is visible. When it was popular to use this method, IE7 did not appear, and the height attribute is actually parsed according to "min-height" under IE6, so as long as you hack the IE6, "* html {height:1%}" can trigger hasLayout without side effects. Later, there are still a lot of hasLayout problems with IE7, but IE7 has been able to correctly identify height attributes, and the "height:1%" method is no longer applicable.

5. For IE7, the best way is to set the minimum height of the element to 0px (min-height0;).

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.