CSS Magic Hall: HasLayout turns out to be like this!-CSS Tutorial-php.cn

CSS Magic Hall: HasLayout turns out to be like this!

巴扎黑

Release： 2017-06-28 11:13:04

Original

1225 people have browsed it

Preface

I have always heard that many weird bugs in old versions of IE are caused by a mysterious character, that is hasLayout. Taking advantage of the recent sudden nervousness, I plan to learn CSS carefully and answer the doubts I have had for many years.

Who is hasLayout?

hasLayout can be simply regarded as the BFC (Block Formatting Context) in IE5.5/6/7. That is, an element either organizes and calculates its own content (that is, sets its own width and height through width/height), or its containing block organizes and calculates its size. As for IFC (that is, it does not have a layout), the element cannot organize and size its own content, but its size is determined by its own content (that is, it can only be determined by line-height Set the content line spacing, and use line spacing to support the height of the element; you cannot set the element width through width, it can only be determined by the content)
When hasLayout is true (it is the so-called "owning the layout" ), which is equivalent to the element generating a new BFC, and the element itself organizes and calculates the size of its own content; The containing containing block to which it belongs performs organization and size calculations.
Like the feature that generates new BFC, hasLayout cannot be set directly through CSS properties, but this feature is turned on indirectly through certain CSS properties. The difference is that some CSS properties indirectly turn on hasLayout to true in an irreversible way. And by default, only the
html element will generate a new BFC, while the default hasLayout is true for elements other than the html element. In addition, we can use the
object.currentStyle.hasLayout attribute to determine whether the element has the hasLayout feature turned on.

At this point we should understand that to understand hasLayout, we must understand BFC, so here you can refer to CSS Magic Hall: Reunderstanding Box Model, IFC, BFC and Collapsing margins

Default

The element of hasLayout==true

<html>, <body><table>, <tr>, <th>, <td><img>,<hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet>,<marquee>

Copy after login

The way to trigger

hasLayout==true

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)

Copy after login

IE7 There are some extras The attributes (incomplete list) can trigger hasLayout:

min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed

Copy after login

Previous versions of IE6 (including the mixed mode of IE6 and all subsequent versions, in fact, this mixed mode is equivalent to IE 5.5 in terms of rendering), through Setting the 'width' or 'height' (non-auto) of any element can trigger hasLayout; but it does not work on inline elements in the standards mode of IE6 and IE7. Setting 'display:inline-block' can.

Passing

display:inline-block or min-width:0 or min-height:0 will irreversibly enable the hasLayout feature. When no other properties enable hasLayout, hasLayout can be turned off in the following way

max-width, max-height (设为 "none")(在IE7中)
position (设为 "static")
float (设为 "none")
overflow (设为 "visible") (在IE7中)
zoom (设为 "normal")
writing-mode (从 "tb-rl" 设为 "lr-t")

Copy after login

and the CSS properties of a new BFC

position:absolute/fixed
float:left/right
display:inline-block/table-cell/table-caption/flex/inline-flex
overflow:(除visible外任意值)

Copy after login

You can see the methods and triggers that lead to the generation of a new BFC

The methods of hasLayout==true do not completely overlap. Therefore, the problems caused by hasLayout==true can be largely understood to be caused by the generation of new BFCs in inappropriate or unexpected places.

How to be compatible?

The above problem can only be avoided if an element triggers hasLayout in earlier versions of IE and creates a block formatting context in other browsers. That is, enable both of the above to ensure compatibility across browsers, or conversely, disable both.

Enable the element to generate block formatting context and trigger hasLayout
1.1 For the element that triggers hasLayout, set it through CSS to generate block formatting context;
1.2 For elements that generate block formatting context but do not trigger hasLayout, set 'zoom:1' to trigger hasLayout.
So that the element does not trigger hasLayout and does not create a block formatting context.

Summary

Although I no longer need to adapt to IE5.5/6/7, it is still necessary to understand hasLayout. In fact, it can be understood as learning BFC from another angle!

Respect the originality, please indicate the source of reprinting: http://www.cnblogs.com/fsjohnhuang/p/5291166.htmlFat boy john^_^

Thank you

Talk about it BFC and IE-specific attributes hasLayout

RM8002: hasLayout cannot be triggered in IE6 IE7 IE8(Q) at the same time and elements that create Block Formatting Context in other browsers will behave differently in each browser

The above is the detailed content of CSS Magic Hall: HasLayout turns out to be like this!. For more information, please follow other related articles on the PHP Chinese website!