つまり、compatibility-haslayout_html/css_WEB-ITnose

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, button, file, select, textarea, fieldset

* marquee

* Frameset, Frame, iframe

* objects, applets, embed

したがって、これらの属性の一部はインライン要素ですが、次のようにすることができます幅と高さを自分で設定します。

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

haslayout を有効にするには?

ほとんどの IE 表示エラーは、要素の haslayout 属性をアクティブにすることで修正できます。 cssのsize属性(幅/高さ)などを設定することで要素のhaslayoutを有効にし、「レイアウトを持つ」ようにすることができます。以下に示すように、次の CSS プロパティを設定するだけです。

* display: inline-block (すべての主要なブラウザで動作します)

* height: (auto以外の任意の値)

* float: (左または右)

auto以外の任意の値)

* writing-mode : tb-rl

* ズーム: (標準を除く任意の値)

Internet Explorer 7 には、いくつかの追加プロパティもあります (完全なリストではありません):

* min -height: (任意の値)

* max- height: (none を除く任意の値)

* min-width: (任意の値)

* max-width: (none を除く任意の値)

* overflow : (visible を除く任意の値)

* overflow-x: (visible を除く任意の値)

* overflow-y: (visible を除く任意の値)

*position:fixed

ここで、overflow-x と overflow -y は CSS3 ボックス モデルの属性であり、CSS3 ボックス モデルではまだ広くサポートされていません。ブラウザ。

zoom はいつでも hasLayout をトリガーできますが、IE5.0 ではサポートされていません。

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

典型的な例:

非浮動外側 div は内部の浮動要素の高さによって引き伸ばされず、外側の非浮動 div の高さは自動的に計算されません。この非浮動 div にzoom:1; を追加して、その hasLayout 属性をトリガーします。もちろん、これは標準規格に準拠するために、内側の浮動 div によって拡張されます。 Firefox などのブラウザでは、overflow: hidden; display: table を追加するか、疑似要素: after を使用して問題を解決できます。

詳細については、http://xiaogai1010.blog.163.com/blog/static/13717030820122242616468/

をご覧ください。

hasLayout はインライン要素にも影響を与えることができます。インライン要素の hasLayout が true の場合、インライン要素の高さと幅を設定して、目的の効果を得ることができます。

(1)zoom:1 を使用して、インライン要素の haslayout 属性をトリガーして、その高さと幅を計算できますが、これは ie6 と ie7 にのみ適用されます。

(2) display:inline-block、すべての主流ブラウザに適した、インライン要素の haslayout 属性をトリガーします。

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

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

(2) haslayout 属性がトリガーされるため、IE6 および IE7 では要素のレイアウトに問題が発生することがあります。この場合、IE プラグインの開発者ツールバーを使用して、要素が haslayout をトリガーしたかどうかを確認する必要があります。属性がトリガーされた場合は、幅、高さ、浮動小数点数、位置およびその他の関連属性を削除して、Web ページを参照して問題を見つけることができます。