hasLayout によって発生する CSS バグの一覧

IE には長い間問題がありました。誰もがテストを受けたとき、誰もが笑顔でしたが、それはただのニヤニヤでした...

残念ながら、国内市場にはそのようなニヤニヤしたブラウザが溢れているので仕方がありません...（ IE678の死の速度に注目してください）

一つ一つ確認し、読み、抜粋し、記録し、練習し、要約した後、私はついに彼の悪い癖の原因を根本的に理解することができました。

レイアウトがあります!

まず定義:

これは IE のユニークな特性です。要素がサイズを計算して独自のコンテンツを整理するか、親要素に依存してコンテンツを計算して整理するかを決定します。これら 2 つの概念を区別するために、レンダリングエンジンは hasLayout 属性 (true または false) を使用します。属性が true の場合、この要素はレイアウトをトリガーすると言えます。

hasLayout属性を持つタグ:

この属性の重要性は何ですか?

要素オブジェクトのレイアウトがアクティブになると、その要素とその子要素の配置とサイズの計算が独立して実行されるため、つまり独立したレイアウトになるため、ブラウザはレイアウトされた要素を処理するためにより多くのコストを消費します。パフォーマンスを向上させるために、IE はこのプライベートプロパティを考案しました。

hasLayout をトリガーできる CSS 機能:

コードをコピー

コードは次のとおりです。

表示: インラインブロック
高さ: (auto以外の任意の値)
幅: (auto以外の任意の値)
フロート: (左 || 右)
位置: 絶対
書き込みモード: tb-rl
ズーム: (通常以外の任意の値)

IE7 は hasLayout CSS 機能をトリガーできます。

コードをコピー

コードは次のとおりです。

min-height: (任意の値)
min-width: (任意の値)
max-height: (none 以外の任意の値)
max-width: (none以外の任意の値)
overflow: (visible 以外の任意の値、ブロックレベル要素のみ)
overflow-x: (visible 以外の任意の値、ブロックレベル要素のみ)
overflow-y: (visible 以外の任意の値、ブロックレベル要素のみ)
位置:固定

口角が下がり目が細くなる臨床症状を見てみましょう。（以下の内容はすべて私自身がテストしたものです）

	質問	ブラウザ	デモ	解決
1	入力[ボタン \| 送信]が中央に配置されていません	IE8	バグ \| 修正済み	幅を追加
2	body{overflow:hidden;} はスクロールバーを削除しません	IE6/7	バグ \| 修正済み	html{overflow:hidden;}に変更
3	hasLayoutタグには高さがある	IE6/7	バグ \| 修正済み	オーバーフローを追加:hidden;*height:0
4	フォーム>[hasLayout]要素にmargin-leftがある場合、子要素の[input \| textarea]には2×margin-leftがあります。	IE6/7	バグ \| 修正済み	フォーム > [hasLayout 要素] {margin-left: width;} フォーム div{*margin-left:width÷2;}
5	子要素に position:relative が設定されている場合、親要素に overflow:[hidden\|auto] を設定することは、子要素に position:visible を設定することと同じです。	IE6/7	バグ \| 修正済み	親要素に対して位置を相対的に設定します。
6	リスト内での混乱したフローティング：リスト内で画像をフローティングすると、画像が通常の位置からはみ出したり、リストスタイルがなくなったりする	IE8	バグ \| 修正済み	リストスタイルを背景画像に置き換える
7	thは親要素のテキスト配置を自動的に継承しません。	IE8	バグ \| 修正済み	th; に text-align:inherit を追加します。
8	許可されるスタイルの最大数（link/style/@import(link)を含む）は32です。	IE6-8	─ 常識	99.99%の場合、遭遇することはありません
9	PNG画像の色と背景色は同じ値ですが、表示が異なります	IE6-7	バグ \| 修正済み	pngcrushを使用して画像からガンマプロファイルを削除します
10	margin:0 auto; ブロック要素を水平方向に中央揃えにすることはできません	IE6-8	バグ \| 修正済み	ブロック要素に幅を追加する
11	疑似クラス :first-line \| :first-letter を使用すると、属性値に !important が存在すると、属性が無効になります。	IE8	バグ \| 修正済み	!important は悪です。もう使用しないでください
12	:first-letterは無効になりました	IE6	バグ \| 修正済み	:first-letter を、p:first-letter h1{} ではなく、h1、p:first-letter{} などの {} に最も近い場所に移動します。
13	Position:absolute要素、display:blockでは、:hoverでないときはテキストのみがクリック可能	IE6/7	バグ \| 修正済み	a に背景を追加します。背景が透明な場合は、background:url('任意のページ内のキャッシュされたファイルリンク') を使用します。background:url(#)[公式ソリューション] は、HTTP リクエストが増加するため推奨されません。
14	dt、dd、li 背景が無効	IE6	バグ \| 修正済み	dt、dd、li{位置:相対;}
15	<noscript /> 要素のスタイルは、JavaScript が有効になっている場合に表示されます。	IE6-8	バグ \| 修正済み	js を使用して、display:none を <noscript /> に追加します。
16	liの要素はベースラインから外れて下に引っ張られます	IE8/9	バグ \| 修正済み	liにdisplay:inlineまたはfloat:[direction]を設定する
17	リスト内のliのリストスタイルが表示されない	IE6/7	バグ \| 修正済み	li に margin-left を追加して表示用のスペースを残します (ul には追加しないでください)
18	画像を垂直方向に中央配置できません	IE6/7	バグ/修正	空のタグを追加し、display:inline-block; などの「レイアウト」に割り当てます。
19	ポインターのスタイルをカスタマイズできません	IE6-8	バグ \| 修正済み	ポインタファイルへの絶対パスを設定する
20	高さが高さで定義された高さを超えています	IE6	バグ/修正	_overflow:hidden; (推奨) または _font-size:0; を追加します。
21	幅がwidthで定義された幅を超えています	IE6	バグ/修正	オーバーフローを追加します:hidden;
22	二重マージン	IE6	─ 常識	フロート要素にdisplay:inlineを追加する
23	負のマージン値が非表示になる: hasLayout の親要素内の非 hasLayout 要素。負のマージンを使用すると、親要素の外側の部分は見えなくなります。	IE6/7	バグ/修正	親要素から hasLayout を削除するか、子要素に hasLayout を割り当てて position:relative; を追加します。
24	2つのフローティング要素のうち1つのテキストを斜体に設定すると、もう1つの要素は斜体テキストの要素の下にドロップされます。	IE6	バグ/修正	斜体テキストの要素に overflow:hidden を追加します。
25	3pxの間隔: フロート要素の後の要素は3pxの間隔になります	IE6	バグ/修正	ちょうど3pxなので、_margin-left: -3px;などの「ブルートフォース」を使用するか、floatを設定します。
26	text-alignはブロックレベル要素に影響します	IE6/7	バグ/修正	フロートを配置するか、テキストの配置を個別に設定してください