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

How to understand the proprietary CSS attribute hasLayout of IE browser, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

I. what is hasLayout?

HasLayout has many similarities with BFC, but the concept of hasLayout is easier to understand. In Internet Explorer, elements use the concept of "layout" to control size and positioning, which can be divided into two cases: having a layout and having no layout. Elements with layouts control the size and positioning of themselves and their children, while elements without layouts control their size and positioning through their parent elements (the most recent ancestor elements with layouts). Whether an element has a layout or not is informed by the hasLayout attribute to the browser. It is a Boolean variable, true represents that the element has a layout, false represents that the element has no layout. In short, hasLayout is just a proprietary attribute under IE, and an element browser with hasLayout as true will give it a series of effects.

In particular, hasLayout has been abandoned in IE 8 and later versions of IE, so in actual development, you only need to trigger hasLayout for certain elements for browsers below IE 8.

Triggering hasLayout for an element will affect the size and positioning of an element, which consumes more system resources. Therefore, IE designers only trigger hasLayout for some elements by default (that is, some elements trigger hasLayout by default, which is different from the fact that BFC is triggered entirely by developers through a specific CSS). These elements are as follows:

Body and html

Table, tr, th, td

Img

Hr

Input, button, file, select, textarea, fieldset

Marquee

Frameset, frame, iframe

Objects, applets, embed

two。 How to trigger hasLayout

In addition to the elements that IE triggers hasLayout by default, Web developers can also use a specific CSS to trigger the element's hasLayout.

You can trigger hasLayout (that is, set the element's hasLayout attribute to true) by setting any of the following CSS for the element.

Float: (left or right)

Position: absolute

Display: inline-block

Width: (any value except auto)

Height: (any value except auto)

Writing-mode: tb-rl

Zoom: (any value except normal, including 1 that is set to have the same effect as normal is also valid)

In addition, some CSS can also trigger hasLayout under IE 7.

Min-width: (any value including 0)

Max-width: (any value except none)

Min-height: (any value including 0)

Max-height: (any value except none)

Overflow value other than visible (hidden,auto,scroll)

Position: fixed

For inline elements (either span elements that are considered inline by default by the browser, or elements with display: inline set), width and height can only trigger the element's hasLayout in IE5.x and IE6 or later quirks mode, but for IE6, inline elements will ignore the width or height attribute if the browser is running in standard compatibility mode, so setting width or height cannot order the element to trigger hasLayout in this case. But zoom can always trigger hasLayout except in IE 5.0. Zoom is used to set or retrieve the zoom ratio of the element. Setting zoom: 1 for the element can trigger the hasLayout of the element without causing unnecessary effects on the element. Therefore, considering the compatibility between browsers and the impact on the element, Kayo recommends using zoom: 1 to trigger the hasLayout of the element.

three。 The effect of triggering hasLayout

Although hasLayout will also affect the size and positioning of elements like BFC, it is not a complete set of standards, and because it is triggered by default only for certain elements, which leads to a lot of front-end development of bugs under IE, triggering hasLayout is more meaningful to solve some bugs under IE, rather than using some of its "side effects" to achieve certain results. In addition, because the elements that trigger hasLayout will have some effects similar to those that trigger BFC, in order to unify the performance of elements in IE and browsers that support BFC, Kayo recommends that the elements that trigger BFC trigger hasLayout at the same time, of course, you need to consider the actual situation, or you may only need to trigger one of them to achieve uniform performance, which will be illustrated below.

Here are some of the effects that trigger the hasLayout element first:

1. Prevent outer margins from folding

The vertical outer margins of two connected div are superimposed, but this does not happen between the elements that trigger the hasLayout, as shown in the following figure:

In the example in the figure above, each of the three div contains a p element, and the three div and their p elements all have top and bottom margins, but only the margin of the third div is not folded with the outer margin of its child element p. This is because the third div uses zoom: 1 to trigger hasLayout, preventing it from folding with the outer margins of its child elements.

In addition, the example also uses the BFC of the overflow: hidden trigger element, which takes advantage of BFC's feature of preventing outer margins from folding to achieve a uniform representation of the element in IE and modern browsers.

two。 Can contain floating child elements, that is, including its floating child elements when calculating height

The effect is as shown in the figure:

In the example above, there are two div, each containing a p element with a float set, but the first div is actually judged by the browser to have no height and width, that is, a height of 0, with the upper and lower borders overlapping. The second div uses zoom: 1 to trigger the hasLayout, which can contain floating elements, so it shows the height correctly and its border position is normal.

In this example, overflow: hidden is also used to trigger BFC, which is similar to the previous example, which takes advantage of the fact that BFC can contain floating child elements to achieve a uniform representation of elements in IE and modern browsers.

3. Background image display problem

The element background image can not be displayed correctly is one of the most common problems in web page reconstruction. In IE versions of IE 7 and below, elements without setting height and width often cannot display the background image (the background color displays normally), which is actually related to hasLayout. The actual situation is that elements that do not trigger hasLayout cannot display the background image. As mentioned above, triggering hasLayout means that the element has a layout, in other words, elements with a layout can display the background image correctly. As shown below:

Both div above have the background image set, but only the second div that triggers the hasLayout using zoom: 1 will display the background image correctly.

There is no BFC that triggers the element in this example, because in modern browsers, the element itself does not have a background image display problem.

As you can see, in the first and second examples above, hasLayout and BFC are triggered simultaneously in order to unify the performance of elements in IE (including lower version IE and newer versions of IE) and modern browsers, while the problems in the third example only need to trigger hasLayout for low version IE because they only appear in the lower version of IE. These techniques require special attention in actual projects.

As mentioned above, hasLayout is related to the display bugs under many IE. In fact, many inexplicable bugs are caused by hasLayout, so as long as the hasLayout of the trigger element is appropriate, many IE bugs can often be solved. Here are a few examples of Kayo:

Floating elements double margin bug in IE 6 and earlier-setting display: inline for elements can solve the problem

3 pixel offset bug for IE 5-6-set _ height: 1% for the element can be resolved

This is the answer to the question on how to understand the proprietary CSS attribute hasLayout of IE browser. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.