IE の下位バージョンにおける CSS バグの原因 "haslayout"_html/css_WEB-ITnose

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

CSS、特に IE での CSS のレンダリングをより深く理解したい場合は、haslayout の概念を徹底的に理解することが非常に必要です。 。 IE での表示エラーのほとんどは haslayout が原因で発生します。 true に設定すると、要素自体をレンダリングする必要があるため、要素は、流出するコンテンツを含めるために展開する必要があります。たとえば、切り詰められていない浮動単語や非常に長い単語の場合、 haslayout が true に設定されていない場合、要素はそれをレンダリングするために祖先要素に依存する必要があります。ここで IE の多くのバグが発生します。

要素にレイアウトがある場合、その要素はそれ自体と、可能な子孫要素のサイズと位置を決定します。簡単に言えば、これは、要素がこの作業を行うために祖先要素に依存するのではなく、要素自体とそのコンテンツを維持するためにより多くの時間を費やす必要があることを意味します。したがって、一部の要素にはデフォルトでレイアウトが設定されます。要素が「レイアウトを持つ」または「レイアウトを取得する」、あるいは要素が「レイアウトを持つ」と言うときは、その Microsoft 固有のプロパティ hasLayout が true に設定されていることを意味します。 「レイアウト要素」は、デフォルトでレイアウトを持つ要素、または特定の CSS プロパティを設定することによってレイアウトを持つ要素です。 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

* object、applets、embed

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

haslayoutをアクティブ化するにはどうすればよいですか?

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

* 表示: インラインブロック

* 高さ: (自動以外の任意の値)

* 浮動小数点数: (左または右)

* 位置: 絶対

* 幅: (自動以外の任意の値)

* 書き込み-mode: tb-rl

* ズーム: (通常以外の任意の値)

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

* min-height: (任意の値)

* max -高さ: (なしを除く任意の値)

* 最小幅: (任意の値)

* 最大幅: (なしを除く任意の値)

* オーバーフロー: (可視を除く任意の値)

* overflow-x: (可視以外の任意の値)

* overflow-y: (可視以外の任意の値)

* 位置: 固定

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

インライン要素 (デフォルトは、span などのインライン要素、または display:inline; を持つ要素) の場合、

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

IE7 の場合、最良の方法は、要素の最小の高さを 0 (min-height:0;) に設定することです。

ハッシュレイアウトの問題によって引き起こされる一般的なバグ:

E6 以前のバージョンのダブルマージンフローティングバグ

バグ修正: display:inline;

IE5-6/win の 3 ピクセルオフセットバグ

バグ修正: _height :1% ;

IE6 のいないいないばあバグ

バグ修正: _height:1%; または、子要素に hasLayout を割り当てて、position:相対;

hasLayout 属性は Microsoft に固有の古い属性であることに注意してください. IE8 および IE9 では、hasLayout 属性は廃止されました。上記の Internet Explorer は、IE7、IE6 以下のバージョンを指します。