preface

It’s been said in the past that many of the weird bugs in older versions of IE were caused by a mysterious character: HasLayout. Taking advantage of the recent sudden nervous plan to learn CSS, the way to answer many years of doubts.

What is HasLayout?

HasLayout can simply be regarded as the BFC(Block Formatting Context) in IE5.5/6/7. In other words, an element can be organized and size calculated by itself (width/height can be set) or by containing block. For IFC (that is, without layout), the element cannot organize and calculate the size of its own content, but its size is determined by its own content (that is, the content line space can only be set by line-height, and the height of the element can be supported by the line space; When hasLayout is true (it “owns the layout “), the element generates a new BFC and organizes and sizes its own content. When hasLayout is false (so called “not owning layout “), it means that the element does not generate new BFC, and the element is organized and sized by its containing block. Like the feature that generates new BFCs, HasLayout can’t be set directly through CSS properties. Instead, it can be turned on indirectly through some CSS properties. The difference is that some CSS properties indirectly turn HasLayout on as true in an irreversible way. By default, only HTML elements generate new BFCs, and the default hasLayout to true is not the only HTML element. In addition we can through the object. CurrentStyle. HasLayout attribute to determine whether the element opens the hasLayout features.

If you want to understand HasLayout, then you must understand BFC. CSS Mastering: Learn about Box models, IFC, BFC, and Collapsing

The defaulthasLayout==trueThe elements of the

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

The triggerhasLayout==trueThe way of

Display: inline-block height: (any value except auto) width: (any value except auto) float: (left or right) position: absolute writing-mode: TB-RL Zoom: (any value except Normal)

IE7 also has a few additional attributes (incomplete lists) that trigger HasLayout:

Min-height: (any value) min-height: (any value) max-width: (any value) overflow: Overflow-x: (Any value except visible, for block-level elements only) Overflow-y: (Any value except visible, for block-level elements only) position: fixed

Previous versions of IE6 (and all later versions of IE6) can trigger HasLayout by setting any element’s ‘width’ or ‘height’ (not auto). This does not work on the inline elements in standard mode in IE6 and IE7. Instead, set ‘display:inline-block’. HasLayout is irreversibly enabled via display:inline-block or min-width:0 or min-height:0. When HasLayout is enabled without other attributes, you can turn it off in the following way

max-width, Max-height (set to "none")(in IE7) position (set to "static") float (set to "none") overflow (set to "visible") (in IE7) zoom (set to "Normal ") writing mode (set from" TB-RL "to" LR-T ")

The CSS properties that generate the new BFC

position:absolute/fixed float:left/right display:inline-block/table-cell/table-caption/flex/inline-flex Overflow :(any value except visible)

You can see that there is not a complete overlap between the way the new BFC is generated and the way hasLayout==true is triggered. The problem with hasLayout==true, therefore, can largely be understood as the result of new BFCs being created where they should not or were not expected.

How compatible?

This can only be avoided if an element that triggered HasLayout in earlier versions of IE creates block formatting contexts in other browsers. Enable both to ensure browser compatibility, or vice versa.

  1. For elements that trigger hasLayout, block formatting is set through CSS to generate block formatting context.

  2. Elements that generate block formatting context but do not fire HasLayout, by setting ‘Zoom :1’ to fire HasLayout.

  3. The elements do not trigger HasLayout and do not create block formatting context.

conclusion

Although I don’t have to use IE5.5/6/7 anymore, it’s important to understand HasLayout. In fact, it can be understood as learning BFC from another Angle! Respect the original, please indicate that the reprint is from: fat boy John ^_^

Thank you

HasLayout RM8002: The elements that trigger HasLayout in IE6, IE7, IE8(Q) and create Block Formatting contexts in other browsers behave differently in each browser