CSS Magic Hall：hasLayoutはこうなる！ _html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS Magic Hall：hasLayoutはこうなる！ _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:23:42

オリジナル

986 人が閲覧しました

前書き

IE の古いバージョンの多くの奇妙なバグは、謎の文字、つまり hasLayout によって引き起こされると私はいつも聞いていました。最近の急な緊張を機に、CSSをしっかり勉強して長年の疑問に答えていきたいと思います。

hasLayout とは誰ですか?

hasLayout は、単純に IE5.5/6/7 の BFC (Block Formatting Context) とみなすことができます。つまり、要素が独自のコンテンツを編成してサイズ設定するか、要素を含むブロックにコンテンツを編成してサイズ設定させるかを決定するために使用されます。

hasLayout が true の場合 (いわゆる「レイアウトの所有」)、要素が新しい BFC を生成することと同等であり、要素は独自のコンテンツを編成してサイズ設定します。

hasLayout が false の場合 (いわゆる「レイアウトの所有」) "レイアウト") ") がありません。これは、新しい BFC を生成しない要素と同等です。要素は、それが属する包含ブロックによって編成およびサイズ設定されます。

新しい BFC を生成する機能と同様に、hasLayout は CSS プロパティを通じて直接設定できませんが、この機能は特定の CSS プロパティを通じて間接的にオンにすることができます。違いは、一部の CSS プロパティが間接的に hasLayout を不可逆的な方法で true に変えることです。また、デフォルトでは、HTML 要素のみが新しい BFC の生成に使用され、デフォルトの hasLayout が true である要素は HTML 要素だけではありません。

さらに、object.currentStyle.hasLayout プロパティを使用して、要素で hasLayout 機能が有効になっているかどうかを判断できます。

この時点で、hasLayout を理解するには BFC を理解する必要があることを理解する必要があります。そのため、ここでは CSS Magic Hall: ボックスモデル、IFC、BFC およびマージンの折りたたみの再理解を参照してください

デフォルトの hasLayout==true の要素

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

ログイン後にコピー

Trigger hasLayout==true のメソッド

display: inline-blockheight: (除 auto 外任何值)width: (除 auto 外任何值)float: (left 或 right)position: absolutewriting-mode: tb-rlzoom: (除 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 と同等です)。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/fixedfloat:left/rightdisplay:inline-block/table-cell/table-caption/flex/inline-flexoverflow:(除visible外任意值)

ログイン後にコピー

で、新しい BFC を生成する方法と hasLayout== をトリガーする方法が確認できます。 true は完全には重なりません。したがって、hasLayout==true によって引き起こされる問題は、主に、不適切な場所または予期しない場所での新しい BFC の生成によって引き起こされると理解できます。

互換性はどうですか?

上記の問題は、要素が以前のバージョンの IE で hasLayout をトリガーし、他のブラウザでブロックフォーマットコンテキストを作成する場合にのみ回避できます。つまり、上記の両方を有効にしてブラウザ間の互換性を確保するか、逆に両方を無効にします。

要素にブロック書式設定コンテキストを生成させ、hasLayout をトリガーさせます。 hasLayout をトリガーする要素については、CSS を通じてブロック書式設定コンテキストを生成しますが、Set ' を通じて hasLayout 要素をトリガーしません。 zoom:1' で hasLayout をトリガーします。
この要素は hasLayout をトリガーせず、ブロック書式設定コンテキストを作成しません。
まとめ

IE5.5/6/7に適応する必要はなくなりましたが、hasLayoutを理解することは依然として必要です。実は、これは別の角度から BFC を学ぶものとして理解することができます。オリジナリティを尊重し、転載元を明記してください: Fatty john^_^

ありがとうございます