ホームページ > 記事 > ウェブフロントエンド > CSS Magic Hall: HasLayout はこうなる！
CSS Magic Hall: HasLayout はこうなる！
- 巴扎黑オリジナル
- 2017-06-28 11:13:041144ブラウズ
前書き
IE の古いバージョンの多くの奇妙なバグは、謎の文字、つまり hasLayout によって引き起こされると私はいつも聞いていました。最近の急な緊張を機に、CSSをしっかり勉強して長年の疑問に答えていきたいと思います。
hasLayout とは誰ですか?
hasLayout は、単純に IE5.5/6/7 の BFC (Block Formatting Context) とみなすことができます。つまり、要素は独自のコンテンツを編成してサイズ設定する (つまり、幅/高さによって独自の幅と高さを設定する) か、要素を含むブロックがコンテンツを編成してサイズ設定することができます。 IFC (つまり、レイアウトを持たない) に関しては、 要素は独自のコンテンツのサイズを整理して計算することはできませんが、そのサイズは独自のコンテンツによって決まります (つまり、コンテンツの行間隔は、 line-height を通して、要素の高さをサポートする行間隔を通して設定します。要素の幅は width を通して設定することはできません。内容によってのみ決定できます) hasLayout が true の場合 (いわゆる"独自のレイアウト")、それは新しい BFC を生成する要素と同等であり、要素自体が独自のコンテンツを編成し、サイズを計算します。
hasLayout が false (いわゆる「独自のレイアウト」) の場合、これは、新しい BFC を生成しない要素と同等であり、要素は、それが属する包含ブロックによって編成され、サイズが計算されます。
新しい BFC を生成する機能と同様に、hasLayout は CSS プロパティを通じて直接設定できませんが、この機能は特定の CSS プロパティを通じて間接的に有効になります。違いは、一部の CSS プロパティが間接的に hasLayout を元に戻せない方法で true に設定することです。また、デフォルトでは、html 要素のみが新しい BFC を生成しますが、html 要素以外の要素ではデフォルトの hasLayout が true になります。
さらに、 object.currentStyle.hasLayout 属性を使用して、要素で hasLayout 機能が有効になっているかどうかを判断できます。 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 外任意值)
IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ：
min-height: (任意值) min-width: (任意值) max-height: (除 none 外任意值) max-width: (除 none 外任意值) overflow: (除 visible 外任意值，仅用于块级元素) overflow-x: (除 visible 外任意值，仅用于块级元素) overflow-y: (除 visible 外任意值，仅用于块级元素) position: fixed
IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5）， 通过设置任何元素的 'width' 或 'height'（非auto）都可以触发 hasLayout ； 但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 'display:inline-block' 才可以。
其中通过display:inline-block或min-width:0或min-height:0将不可逆地启用hasLayout特性。而在没有其他属性启用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 code> 要素
hasLayout==true code> 要素
rrreee
hasLayout==true
rrreee をトリガーする方法IE7 には追加の属性もいくつかあります ( (不完全なリスト) は、hasLayout をトリガーできます: - rrreee
- IE6 の以前のバージョン (IE6 とそれ以降のすべてのバージョンの混合モードも含まれます。実際、この混合モードはレンダリングの点で IE 5.5 と同等です)。任意の要素の ' または 'height' (非自動) は hasLayout をトリガーできますが、IE6 および IE7 の標準モードでは 'display:inline-block' を設定することによってのみインライン要素では機能しません。
新しい BFC を生成するメソッドとトリガーを確認できます
hasLayout 機能は、display:inline-blockまたはmin-width:0またはmin-height:0を通じて不可逆的に有効になります。他に hasLayout を有効にするプロパティがない場合は、hasLayout をオフにして、次の方法で新しい BFC の CSS プロパティを生成できます
rrreeehasLayout==trueウェイは完全には重複しません。したがって、hasLayout==true によって引き起こされる問題は、主に、不適切な場所または予期しない場所での新しい BFC の生成によって引き起こされると理解できます。 - 互換性はどうですか？ 上記の問題は、要素が以前のバージョンの IE で hasLayout をトリガーし、他のブラウザでブロック フォーマット コンテキストを作成する場合にのみ回避できます。つまり、上記の両方を有効にしてブラウザ間の互換性を確保するか、逆に両方を無効にします。
1.1 hasLayoutをトリガーする要素については、CSSを介して設定し、ブロックフォーマットコンテキストを生成します。
1.2 ブロックフォーマットコンテキストを生成しますが、Setを介して要素のhasLayoutをトリガーしません。 zoom:1' で hasLayout をトリガーします。
この要素は hasLayout をトリガーせず、ブロック書式設定コンテキストを作成しません。
以上がCSS Magic Hall: HasLayout はこうなる！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。