CSS Magic Hall: Haslayout It turns out this is true!

Objective

In the past has been heard that the old version of IE under a lot of strange bugs are caused by a mysterious character, that is haslayout. Take advantage of the recent sudden insane plan to study CSS, by the way to answer the doubts over the years.

Where in the world is Haslayout sacred?

Haslayout can be seen simply as the BFC in IE5.5/6/7 (Block formatting Context). that is, an element either organizes and sizes itself into its own content (which can be set by Width/height to its own width), or is organized and dimensioned by its containing block. IFC, which does not have a layout, is an element that cannot organize and size its own content, but rather its own content that determines its size (that is, it can only set the content line spacing through line-height, which supports the height of the element by leading Or the width of the element can be set by width, but only by the content)
When Haslayout is true (the so-called "own Layout"), the equivalent element generates a new BFC, and the elements themselves organize and size their contents;
When Haslayout is False (so-called "no Layout"), the element does not produce a new BFC, and the element is organized and dimensioned by the containing block to which it belongs.
As with the new BFC feature, Haslayout cannot be set directly through CSS properties, but rather indirectly through some CSS properties. The difference is that some CSS properties are indirectly turned haslayout to true in an irreversible manner. And by default there are only elements that produce new BFC, and elements with the html default haslayout true are not the only elements html .
In addition, we can use object.currentStyle.hasLayout attributes to determine whether an element has the Haslayout feature turned on.

Here we should understand that to understand haslayout you have to understand BFC, so you can refer to the CSS Magic Hall: Re-recognize the box Model, IFC, BFC, and collapsing margins

hasLayout==truethe default element

hasLayout==trueHow to Trigger

Display:inline-blockheight: (any value except Auto) Width: (any value except Auto) float: (left or right) Position:absolutewriting-mode:tb-rlzo Om: (any value except normal)
IE7 also has some additional attributes (not a complete list) that can trigger Haslayout:

Min-height: (Any value) Min-width: (Any value) Max-height: (any value except none) Max-width: (any value except none) Overflow: (any value except visible, only for block-level elements) Overf Low-x: (Any value except visible, only for block-level elements) Overflow-y: (any value except visible, only for block-level elements) position:fixed
IE6 Previous version (also includes IE6 and all subsequent versions of the promiscuous mode, in fact, this promiscuous mode is equivalent to IE 5.5 in terms of rendering), by setting any element of the ' width ' or ' height ' (not auto) can trigger haslayout; but in IE6 and IE The 7 Standard mode does not work on the inline element, and setting ' Display:inline-block ' is OK.

display:inline-block min-width:0 min-height:0 The Haslayout feature is enabled through or or will not be reversible. When no other property is enabled for Haslayout, the haslayout can be turned off in the following ways

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 "no") Rmal ") Writing-mode (set from" Tb-rl "to" lr-t ")
And the CSS properties that produce the new BFC

Position:absolute/fixedfloat:left/rightdisplay:inline-block/table-cell/table-caption/flex/inline-flexoverflow :(any value except visible)
You can see that the way in which new BFC are generated and hasLayout==true how they are triggered do not overlap completely. Therefore, the problem caused by Haslayout==true is largely understood to be caused by the creation of new BFC where it is not expected or anticipated.

How compatible?

This problem can only be avoided if one element triggers Haslayout in an earlier version of IE and the block formatting context is created in another browser. That is, both of these are enabled to ensure compatibility with each browser, or, conversely, neither is enabled.


 

 
  
 
   
Causes the element to generate the block formatting context, and triggers the haslayout
1.1 For triggering haslayout elements, through the CSS settings, so that it produces block formatting context;
1.2 Generates a block formatting context but does not trigger the Haslayout element by setting ' zoom:1 ' to trigger haslayout.
 
   
So that the element does not trigger haslayout, and does not create a block formatting context.
 
  

 
Summarize

Although I do not have to adapt to the IE5.5/6/7 now, but understanding haslayout is still very necessary. In fact, it can be understood to learn BFC from another angle!
Respect the original, reprint please indicate from: http://www.cnblogs.com/fsjohnhuang/p/5291166.html Fat boy John ^_^

Thank

Talk about BFC and IE special attribute Haslayout
RM8002: You cannot trigger haslayout in IE6 IE7 IE8 (Q) at the same time and create Block formatting context elements in other browsers that behave differently in each browser