IE ブラウザーの hasLayout の概要_html/css_WEB-ITnose

haslayout は、Windows Internet Explorer レンダリング エンジンの内部コンポーネントです。 Internet Explorer では、要素は独自のコンテンツのサイズと構成を計算するか、親要素に依存してコンテンツのサイズと構成を計算します。これら 2 つの異なる概念を調和させるために、レンダリング エンジンは haslayout 属性を使用します。この属性の値は true または false です。

要素の haslayout 属性値が true の場合、この要素にはレイアウトがあると言います。 CSS、特に IE での CSS のレンダリングをより深く理解したい場合は、haslayout を徹底的に理解する必要がある概念です。 IE での表示エラーのほとんどは haslayout が原因で発生します。要素にレイアウトがある場合、要素自体および子孫要素のサイズと位置を決定します。

簡単に言えば、これは、この要素がこれらのタスクを完了するために祖先要素に依存するのではなく、それ自体とその内部のコンテンツを維持するためにより多くの費用を費やす必要があることを意味します。したがって、一部の要素にはデフォルトでレイアウトが設定されます。 haslayout 属性は true に設定されます。レイアウトを持つ要素は、デフォルトでレイアウトを持つ要素、または特定の CSS プロパティを設定することによってレイアウトを持つ要素です。 HTML 要素に haslayout 属性がある場合、この要素の haslayout 値は true でなければなりません。haslayout 読み取り専用属性がトリガーされると、元に戻すことはできません。

IE 開発者ツールバーを使用して、IE の html 要素に haslayout があるかどうかを確認できます。IE 開発者ツールバーでは、haslayout を持つ要素は通常「haslayout=-1」として表示されます。

独自のコンテンツの整理を担当する要素にはデフォルトでレイアウトがあり、主に次の要素 (不完全なリスト) が含まれます:

*body および html *table,tr,th,td *img *hr *input,button,file ,select ,textarea,fieldset *marquee *frameset,frame,iframe *objects,applets,embed

すべての要素にデフォルトでレイアウトがあるわけではないため、Microsoft が挙げた主な理由は「パフォーマンスとシンプルさ」です。すべての要素がデフォルトでレイアウトされている場合、パフォーマンスとメモリ使用量に悪影響を及ぼす可能性があります。

haslayout を有効にする方法 ほとんどの IE 表示エラーは、要素の haslayout 属性を有効にすることで修正できます。 CSS サイズ属性 (幅/高さ) などを設定することで要素の haslayout を有効にし、「レイアウトを持つ」ようにすることができます。

以下に示すように、次の CSS プロパティを設定するだけです。 *display:inline-block *height:(auto 以外の任意の値) *float:(左または右) *position:absolute *width:(auto 以外の任意の値) *writing-mode:tb-rl *zoom:(normal を除くnone を除く任意の値) Internet Explorer7 には、追加のプロパティもいくつかあります (完全なリストではありません)。 *min-height: (任意の値) *max-height: ( none を除く任意の値) *min-width: (任意の値) *max -width: (none を除く任意の値) *overflow: (visible を除く任意の値) *overflow-x: (visible を除く任意の値) *overflow-y: (visible を除く任意の値) *position: 固定。

インライン要素 (デフォルトは inline 要素または display:inline 要素) の場合、IE5.x および IE6 以降のバージョンの Quirks モードでは幅と高さのみが haslayout をトリガーします。 IE6 の場合、ブラウザーが標準互換モードで実行されている場合、インライン要素は幅または高さの属性を無視するため、この場合、幅または高さを設定しても要素にレイアウトを指定することはできません。

zoom はいつでも haslayout をトリガーできますが、IE5.0 ではサポートされていません。 「layout」を持つ要素が同時に「display:inline」である場合、その動作は標準で言及されている inline-block と非常によく似ています。通常のテキストと同様に、vertical-align の影響を受けて段落内で水平方向に連続して配置されます。コンテンツに応じてサイズを適応的に調整できます。これは、IE/Win だけでは、インライン要素にブロック レベルの要素を含めることができる理由も説明できます。これは、他のブラウザでは、IE/Win とは異なり、display: inline はインラインを意味し、インライン要素にレイアウトが作成されると、その後もレイアウトが保持されるためです。レイアウトはインラインブロックになります。

halayout の問題のデバッグと解決

IE で Web ページの動作が異常な場合は、haslayout をアクティブにして問題があるかどうかを確認できます。一般的な方法は、特定の要素の CSS にzoom:1を設定することです。ほとんどの場合、既存の環境に影響を与えることなく要素の haslayout を起動するため、Zoom:1 が使用されます。問題が解消されれば、基本的には haslayout が原因であると判断できます。その後、対応する CSS プロパティを設定することでこの問題を修正できます。最初に要素の幅/高さの属性を設定してから、他の属性を検討することをお勧めします。

IE6 以前のバージョンの場合、一般的な方法は Holly hack と呼ばれ、この要素の高さを 1% (height:1%;) に設定します。この要素のオーバーフロー プロパティが可視に設定されている場合、このメソッドは機能しないことに注意してください。または、IE の条件付きコメントを使用します。 IE7 の場合、要素の最小の高さを 0 (min-height:0;) に設定するのが最善の方法です。

haslayout の問題による一般的なバグ

IE6 以前のバージョンのダブルマージンフローティングバグ バグ修正: display:inline;

IE5-6/win の 3 ピクセルオフセットバグ バグ修正: _height:1%; -a-boo バグ バグ修正: _height:1%;