CSSのhalayoutを徹底的に理解する

CSS、特に IE での CSS のレンダリングをより深く理解したい場合は、haslayout を徹底的に理解する必要がある概念です。 IE での表示エラーのほとんどは haslayout が原因で発生します。

ハレイアウトとは何ですか?
Haslayout は、Windows Internet Explorer レンダリング エンジンの内部コンポーネントです。 Internet Explorer では、要素がサイズを計算して独自のコンテンツを編成するか、親要素に依存してサイズを計算してコンテンツを編成します。これら 2 つの異なる概念を調和させるために、レンダリング エンジンは、true または false の hasLayout 属性を使用します。要素の hasLayout 属性値が true の場合、その要素はレイアウトを持っていると言います。要素がレイアウトを持っている場合、その要素は、それ自体と子孫要素のサイズの計算と位置決めを担当します。簡単に言うと、これは、要素がこの作業を行うために祖先要素に依存するのではなく、要素自体とその内容を維持するためにより多くの時間を費やす必要があることを意味します。したがって、一部の要素にはデフォルトでレイアウトが設定されます。要素が「レイアウトを持つ」または「レイアウトを取得する」、あるいは要素が「レイアウトを持つ」と言うときは、その Microsoft 固有のプロパティ hasLayout が true に設定されていることを意味します。 「レイアウト要素」は、デフォルトでレイアウトを持つ要素、または特定の CSS プロパティを設定することによってレイアウトを持つ要素です。 HTML 要素に haslayout 属性がある場合、この要素の haslayout の値は true のみである必要があり、一度トリガーされると元に戻すことはできません。 IE の HTML 要素に haslayout があるかどうかは、IE Developer Toolbar で確認できます。IE Developer Toolbar では、通常、haslayout を持つ要素は「haslayout = -1」として表示されます。
独自のコンテンツの整理を担当する要素にはデフォルトでレイアウトがあり、主に次の要素が含まれます（完全なリストではありません）:
* body と html
* table, tr, th, td
* img
* hr
* input 、ボタン、ファイル、選択、テキストエリア、フィールドセット
* マーキー
* フレームセット、フレーム、iframe
すべての要素がデフォルトでレイアウトされている場合、パフォーマンスとメモリ使用量に悪影響を及ぼす可能性があります。
haslayoutを有効にするにはどうすればよいですか？
ほとんどの IE 表示エラーは、要素の haslayout 属性をアクティブにすることで修正できます。 cssのsize属性(幅/高さ)などを設定することで要素のhaslayoutを有効にし、「レイアウトを持つ」ようにすることができます。以下に示すように、次の CSS プロパティを設定するだけです。
* display: inline-block
* height: (auto 以外の任意の値)
* float: (左または右)
-rl
*zoom: (normal 以外の任意の値)
Internet Explorer 7 には、いくつかの追加プロパティがあります (完全なリスト):
*
min-height: (任意の値) *
max-height
: ( * min-width: (なしを除く任意の値) * max-width: (なしを除く任意の値) * オーバーフロー: (可視以外の任意の値) * overflow-x: (可視以外の任意の値) 任意の値)
* overflow-y: (可視以外の任意の値)
* 位置: 固定 overflow-x と overflow-y はプロパティですCSS3 ボックス モデルでは、ブラウザーではまだ広くサポートされていません。
inline要素
（デフォルトはspanなどのインライン要素、またはdisplay:inline;を持つ要素）の場合、
widthとheightだけがIE5.xおよびIE6以降のバージョンのquirksモードでhasLayoutをトリガーします。 IE6 の場合、ブラウザーが標準互換モードで実行されている場合、インライン要素は幅または高さの属性を無視するため、この場合、幅または高さを設定しても要素にレイアウトを指定することはできません。
ZoomはいつでもhasLayoutをトリガーできますが、IE5.0ではサポートされていません。
「layout」を持つ要素が表示される場合: inline 同時に、その動作は標準で言及されている inline-block と非常によく似ています: vertical-align の対象となり、通常のテキストのように段落内で水平方向に連続して配置されます。 内容に応じて、サイズを適応的に調整できます。これは、IE/Win だけでは、インライン要素にブロック レベルの要素を含めることができる理由も説明できます。これは、他のブラウザでは、IE/Win とは異なり、display: inline はインラインを意味し、インライン要素にレイアウトが作成されると、その後もレイアウトが保持されるためです。レイアウトはインラインブロックになります。
レイアウトの問題のデバッグと解決
IE で Web ページが異常に動作する場合は、haslayout をアクティブにして、問題が存在するかどうかを確認できます。一般的な方法は、要素の CSS にzoom:1を設定することです。ほとんどの場合、既存の環境に影響を与えることなく要素の haslayout を起動するため、Zoom:1 が使用されます。問題が解消されれば、基本的には haslayout が原因であると判断できます。その後、対応する CSS プロパティを設定することでこの問題を修正できます。最初に要素の幅/高さの属性を設定してから、他の属性を検討することをお勧めします。
IE6 以前のバージョンでは、この要素の高さを 1% に設定する (height:1%;) という Holly hack と呼ばれる方法が一般的です。この要素のオーバーフロー プロパティが可視に設定されている場合、このメソッドは機能しないことに注意してください。または、IE の条件付きコメントを使用します。
IE7の場合、要素の最小の高さを0に設定する（min-height:0;）のが最善の方法です。
haslayout の問題による一般的なバグ
IE6 以前のバージョンでのダブルマージンフローティングバグ
バグ修正: display:inline;
IE5-6/win での 3 ピクセルオフセットバグ
バグ修正: _height:1%;
E6 Peek-a -ブーバグ
バグ修正: _height:1%;

以上がCSSのhalayoutを徹底的に理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。