IE7 ブラウザでは、text-indent 属性を margin 属性 BUG_html/css_WEB-ITnose に設定します。

問題の原因

今日、プロジェクトの作業中に text-indent 属性を使用して要素をインデントしているときに、要素のオフセットが 360 ブラウザーで発生していることがわかりました。 margin-left と同じ効果です。f12 を開くと、3607.1 のブラウジングが ie7.0 のドキュメント モードを使用していることがわかります。結果は、ie7 でテストした場合も同じです

IE7 での効果

他のブラウザでの効果

この理由は、IE6 および 7 ブラウザでは、display 属性の inline-block 値がサポートされていないため、それを設定してもページ内の要素が無視されることがあります。 display:inline-block 属性は、IE7 ではインラインに見えますが、hiie6 ,7 には haslayout 属性があります。つまり、IE6 および 7 の inline 要素には特殊な状況があり、IE の hasLayout 属性をトリガーした後のレイアウトになります。現時点では、インライン要素のパフォーマンスは、標準ブラウザのインラインブロック要素と基本的に同じです。 IE のプライベート属性zoomを使用してhasLayoutをトリガーし、インライン要素のパフォーマンスを調べます。

 display:inline-block; *display:inline; *zoom:1;

このメソッドを使用して、レイアウトをトリガーして inline-block を実装することもできます。 もちろん、ブロック属性を直接使用することもできます

display:inline-block;*display:block;

レイアウトの概要は以下に再掲されます

レイアウトはありますか？

「レイアウト」は、IE/Win のプライベートな概念であり、要素がその要素に含まれるコンテンツをどのように表示および制限するか、他の要素とどのように相互作用して接続を確立するか、アプリケーション イベントやユーザー イベントにどのように応答して配信するかを決定します。これはフォームの概念に似ています。 Microsoft の開発者は、ボックス型の要素には「プロパティ」 (オブジェクト指向プログラミングの概念) が必要であると考え、hasLayout であるレイアウトを使用しました。 hasLayout は実際にはプロパティでも動作でもありませんが、IE レンダリング エンジンが世代から世代へと継承してきたレンダリング概念であり、この概念に基づいてレンダリングされる要素には特定の特性があります。実際、このレンダリング機能は一部の HTML 要素に固有であり、他の要素では一部の CSS プロパティを通じて true にトリガーすることもでき、一度トリガーされると元に戻すことはできません。

要素が「レイアウトを持つ」または「レイアウトを取得する」、あるいは要素が「レイアウトを持つ」と言うときは、その Microsoft 固有のプロパティ hasLayout が true に設定されていることを意味します。 「レイアウト要素」は、デフォルトでレイアウトを持つ要素、または特定の CSS プロパティを設定することによってレイアウトを持つ要素です。 「レイアウトなし要素」とは、hasLayout がトリガーされていない要素を指します。たとえば、幅と高さが設定されていないクリーンな div 要素は、「レイアウトなしの祖先」として使用できます。デフォルトでレイアウトを持たない要素にレイアウトを割り当てる方法には、hasLayout = true をトリガーする CSS プロパティを設定することが含まれます。デフォルトのレイアウト要素とこれらの属性のリストを参照してください。そもそも hasLayout = true をトリガーした CSS プロパティを削除せずに hasLayout = false を設定する方法はありません。 IE Developer Toobar は要素の現在のスタイルをリアルタイムで確認できます。hasLayout が true の場合、その値は「-1」として表示されます。 要素のプロパティをリアルタイムで変更して「zoom(css)」を「1」に設定することで、デバッグ用に hasLayout をトリガーできます。また、JavaScript を使用して hasLayout のステータスを取得することもできます (<script>alert(my.currentStyle.hasLayout);</script>)が、設定することはできません。

もう 1 つ注意すべき点は、「レイアウト」が JavaScript プログラミングに影響するということです。要素に「レイアウト」がない場合、clientWidth/clientHeight は常に 0 を返します。これは、スクリプトの初心者にとっては混乱を招く可能性があり、Mozilla ブラウザーの処理方法と同じではありません。ただし、これを IE5.0 の「レイアウト」の検出に使用できます。 clientWidth がゼロの場合、要素にはレイアウトがありません。

haLayout はどのような状況で表示されますか?

実際、これは、デフォルトで hasLayout で次の要素を使用する場合、または hasLayout をトリガーするために特定のスタイルを使用する場合を除いて、通常は発生しません。また、IE6 でいくつかの信じられないほどの問題が見つかった場合は例外です。 IE7 の場合、最初に確認すべきことは、hasLayout が問題を引き起こしているかどうかです。hasLayout は IE7 以前のバージョンにのみ表示され、IE8 以降には hasLayout 解析モードはありません。

デフォルトで haslayout を持つ要素 (不完全なリスト)
* html, body * table, tr, th, td
* img
* hr
* input, button, file, select, textarea, fieldset
* legend
* marquee
* フレームセット、フレーム、iframe
* オブジェクト、アプレット、埋め込み
すべての要素がデフォルトでレイアウトを持たない主な理由として Microsoft が挙げているのは、「パフォーマンスとシンプルさ」です。すべての要素がデフォルトでレイアウトされている場合、パフォーマンスとメモリ使用量に悪影響を及ぼす可能性があります。

haslayout を有効にするには?

ほとんどの IE 表示エラーは、要素の haslayout 属性をアクティブにすることで修正できます。 cssのsize属性(幅/高さ)などを設定することで要素のhaslayoutを有効にし、「レイアウトを持つ」ようにすることができます。以下に示すように、次の CSS プロパティを設定するだけです。
* display: inline-block
* height: (auto 以外の任意の値) IE6 の問題を解決するには通常 _height:1%; を使用します、height:1% は実際の高さを変更しません
* float: (左または右)
*position:Absolute
*width:(auto以外の任意の値)
*writing-mode:tb-rl
*zoom:(normal以外の任意の値)
IE7には追加の属性もいくつかある(完全なリストではない):
* min-height: (任意の値)
* max-height: (なしを除く任意の値)
* min-width: (任意の値)
* max-width: (なしを除く任意の値)
* オーバーフロー: ( * overflow-x: (visible を除く任意の値)
* overflow-y: (visible を除く任意の値) *position:fixed
ここで、overflow-x と overflow-y は CSS3 ボックス モデルです。 の属性は、ブラウザーではまだ広くサポートされていません。
インライン要素（デフォルトはspanなどのインライン要素、またはdisplay:inline;を持つ要素）の場合、IE5.xおよびIE6以降のバージョンの奇妙なquirksモードでは、幅と高さのみがhasLayoutをトリガーします。 IE6 の場合、ブラウザーが標準互換モードで実行されている場合、インライン要素は幅または高さの属性を無視するため、この場合、幅または高さを設定しても要素にレイアウトを指定することはできません。
ZoomはいつでもhasLayoutをトリガーできますが、IE5.0ではサポートされていません。
「レイアウト」を持つ要素が表示される場合: インライン同時に、その動作は標準で言及されているインラインブロックと非常によく似ています: 段落内の通常のテキストのように水平方向に連続的に配置され、垂直方向の影響を受けます。コンテンツに応じてサイズを調整できます。これは、IE だけでインライン要素にブロック レベルの要素を含めても問題が少ない理由も説明できます。他のブラウザでは、display: inline はインラインを意味し、IE とは異なり、インライン要素にレイアウトが作成されると、インライン要素は -block になるからです。 。

Haslayout の問題のデバッグと解決
IE で Web ページが異常に動作する場合、haslayout をアクティブにして問題があるかどうかを確認できます。一般的な方法は、要素の CSS にzoom:1を設定することです。ほとんどの場合、既存の環境に影響を与えることなく要素の haslayout を起動するため、Zoom:1 が使用されます。問題が解消されれば、基本的には haslayout が原因であると判断できます。その後、対応する CSS プロパティを設定することでこの問題を修正できます。最初に要素の幅/高さの属性を設定してから、他の属性を検討することをお勧めします。
IE6 以前のバージョンでは、この要素の高さを 1% に設定する (height:1%;) という Holly hack と呼ばれる方法が一般的です。この要素のオーバーフロー プロパティが可視に設定されている場合、このメソッドは機能しないことに注意してください。または、IE の条件付きコメントを使用します。 IE7の場合、要素の最小の高さを0に設定する（min-height:0;）のが最善の方法です。 Haslayoutの問題によって引き起こされるcommonのバグe6 e6のPeek-a-boobug
バグ修正：_height：1％;
float: left|right(IE5+)
display: inline-block(IE5+)
width: "auto" 以外の任意の値 (IE5+; インライン要素には無効)

height: "auto " ( IE5+; インライン要素には無効)

zoom: 「normal」以外の値 (IE5.5+; IE プライベート プロパティ)

writing-mode: tb-rl (IE5+; IE プライベート プロパティ)

overflow: hidden| scroll|auto(IE7; この属性は、IE6 以前のバージョンでは hasLayout をトリガーしない要素には適用できません)

overflow-x|-y: hidden|scroll|auto(IE7; この属性 hasLayout は IE6 ではトリガーされず、以前; このプロパティは CSS3 でのみサポートされています)

position: 固定 (IE7)

min-width: 任意の値 (IE7; 0 も可)

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

min-height: 任意の値 (IE7)

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

position: fixed(IE7)

クリアまたはリセット Set hasLayout:

position: static(IE5+)

float: none(IE5+)

display: "inline-block" 以外の任意の値 (IE5+)

width|height: "auto"(IE5+; インライン要素の場合は無効)

zoom: "normal" (IE5. 5+; IE プライベート プロパティ)

書き込みモード: 'tb-rl' から 'lr-tb' (IE5+; IE プライベート プロパティ)

max-width: "none"(IE7)

オーバーフロー: 表示(IE7)