Home > Article > Web Front-end > CSS Magic Hall: HasLayout turns out to be like this!
CSS Magic Hall: HasLayout turns out to be like this!
- 巴扎黑Original
- 2017-06-28 11:13:041144browse
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.
The element of hasLayout==true
<html>, <body><table>, <tr>, <th>, <td><img>,<hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet>,<marquee>The way to trigger
hasLayout==truedisplay: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
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: fixedPrevious 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")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外任意值)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.
- 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.
Respect the originality, please indicate the source of reprinting: http://www.cnblogs.com/fsjohnhuang/p/5291166.htmlFat boy john^_^
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!