CSS Magic Hall：hasLayoutはこうなる！ _html/css_WEB-ITnose
前書き
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")
position:absolute/fixedfloat:left/rightdisplay:inline-block/table-cell/table-caption/flex/inline-flexoverflow:(除visible外任意值)
互換性はどうですか?
上記の問題は、要素が以前のバージョンの IE で hasLayout をトリガーし、他のブラウザでブロック フォーマット コンテキストを作成する場合にのみ回避できます。つまり、上記の両方を有効にしてブラウザ間の互換性を確保するか、逆に両方を無効にします。
- 要素にブロック書式設定コンテキストを生成させ、hasLayout をトリガーさせます。 hasLayout をトリガーする要素については、CSS を通じてブロック書式設定コンテキストを生成しますが、Set ' を通じて hasLayout 要素をトリガーしません。 zoom:1' で hasLayout をトリガーします。
- この要素は hasLayout をトリガーせず、ブロック書式設定コンテキストを作成しません。
- まとめ
IE5.5/6/7に適応する必要はなくなりましたが、hasLayoutを理解することは依然として必要です。実は、これは別の角度から BFC を学ぶものとして理解することができます。オリジナリティを尊重し、転載元を明記してください: Fatty john^_^
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1663
14
1420
52
1313
25
1266
29
1239
24
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンド
Apr 17, 2025 am 12:12 AM
HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML、CSS、およびJavaScriptの未来：Web開発動向
Apr 19, 2025 am 12:02 AM
HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
HTML対CSS対JavaScript：比較概要
Apr 16, 2025 am 12:04 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML：Webページの構造の構築
Apr 14, 2025 am 12:14 AM
HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
