CSS魔法堂:hasLayoutはそうだったのか!
4006 ワード
前言
以前、古いバージョンのIEの下で多くの奇妙なバグが謎の役によって引き起こされたと聞いていました.それはhasLayoutです.最近急に神経質になってCSSを勉強しようとしたついでに、長年の疑問を解いた.
hasLayoutはいったいどこが神聖なの?
hasLayoutは簡単にIE 5と見なすことができる.5/6/7のBFC(Block Formatting Context).すなわち、1つの要素を決定するために、自分で自分のコンテンツを組織し、サイズ計算するか、containing blockによってサイズ計算を組織します.hasLayoutがtrueの場合(いわゆる「レイアウトを持つ」)は、要素が新しいBFCを生成し、要素自身が自分の内容を組織し、寸法計算することに相当する.hasLayoutがfalseの場合(いわゆる「レイアウトを持たない」)は、エレメントが属するcontaining blockによって組織され、寸法計算されるエレメントが新しいBFCを生成しないことに相当する.新しいBFCを生成する特性と同様にhasLayoutはCSS属性で直接設定することはできませんが、一部のCSS属性で間接的にこの特性をオンにします.異なる点は、いくつかのCSS属性がhasLayoutをtrueとして非可逆的に間接的にオンにすることである.また、デフォルトで新しいBFCが生成されるのは
html要素のみであり、デフォルトhasLayoutがtrueの要素はhtml要素のみではありません.さらに,object.currentStyle.hasLayout属性により,要素がhasLayout特性をオンにしたか否かを判断できる.ここまでhasLayoutを理解するにはBFCを理解しなければならないことを理解すべきであるため、ここではCSS魔法堂を参考にすることができる:Box Model、IFC、BFC、Collapsing marginsを再認識する
デフォルトhasLayout=trueの要素
<html>, <body>
<table>, <tr>, <th>, <td>
<img>,<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>,<marquee>hasLayout=trueをトリガーする方法
display: inline-block
height: ( auto )
width: ( auto )
float: (left right)
position: absolute
writing-mode: tb-rl
zoom: ( normal )IE 7にはhasLayoutをトリガーする追加のプロパティ(不完全リスト)もあります.
min-height: ( )
min-width: ( )
max-height: ( none )
max-width: ( none )
overflow: ( visible ， )
overflow-x: ( visible ， )
overflow-y: ( visible ， )
position: fixedIE 6以前のバージョン(IE 6以降のすべてのバージョンのハイブリッドモードも含まれているが、実際にはこのハイブリッドモードはレンダリング面でIE 5.5に相当する)は、任意の要素の「width」または「height」(autoではない)を設定することでhasLayoutをトリガーすることができる.しかし、IE 6とIE 7の標準モードの行内要素ではだめで、「display:inline-block」を設定してください.
ここで、hasLayout特性は、
display:inline-blockまたはmin-width:0またはmin-height:0によって不可逆的に有効にされる.他のプロパティがhasLayoutを有効にしていない場合は、hasLayoutを閉じるには、次のようにします.max-width, max-height ( "none")( IE7 )
position ( "static")
float ( "none")
overflow ( "visible") ( IE7 )
zoom ( "normal")
writing-mode ( "tb-rl" "lr-t")新しいBFCのCSS属性を生成
position:absolute/fixed
float:left/right
display:inline-block/table-cell/table-caption/flex/inline-flex
overflow:( visible )新しいBFCを生成する方法と、
hasLayout==trueをトリガする方法とが完全に重複していないことが分かる.したがってhasLayout=trueによって引き起こされた問題は,望ましくないあるいは予想外の場所で新しいBFCが生じたことによるものと大きく理解できる.互換性は?
これらの問題は、IEの以前のバージョンでhasLayoutがトリガーされ、他のブラウザでblock formatting contextが作成された場合にのみ回避できます.すなわち、これらの両方を同時に有効にして各ブラウザの互換性を保証するか、逆に両方を有効にしない.
まとめ
私はもうIE 5に合う必要はありませんが.5/6/7ですが、hasLayoutを理解する必要があります.実は別の角度からBFCを学ぶと理解できるでしょう.オリジナルを尊重し、転載は以下のことを明記してください.http://www.cnblogs.com/fsjohnhuang/p/5291166.htmlデブjohn^^;
に感謝
BFCとie固有属性hasLayout RM 8002:IE 6 IE 7 IE 8(Q)でhasLayoutを同時にトリガできず、他のブラウザでBlock Formatting Contextを作成する要素は、各ブラウザでの表現に違いがあります