CSS_html/css_WEB-ITnose での一般的なバグのデバッグ

1. レイアウト??レイアウト

レイアウトは Windows によって提案された概念であり、要素のサイズと位置を制御するために使用されます。レイアウトを持つ要素は、それ自体とその子要素のサイズと位置を担当しますが、レイアウトのない要素は制御のために最も近い祖先要素にのみ依存できます。

IE6 で通常発生するバグは、レイアウトが原因である可能性が高いため、IE でバグを修正する場合、最初に行うことは、ルールによって要素にレイアウトを強制的に適用して、修正できるかどうかを確認することです。

デフォルトでレイアウトを持つ要素には、body、html (標準モード)、table、tr、td、img、hr、input、select、textarea、button、iframe、embed、object、applet、marquee が含まれます

渡された設定 CSSプロパティは要素にレイアウトを強制することもできます:

1) float: 左または右

2) 表示: インラインブロック

3) 幅: 任意の値

4) 高さ: 任意の値

5) ズーム: 任意の値

6) writing-mode: tb-rl

IE7 では、次の属性によって要素にレイアウトを強制することもできます:

1) overflow: hidden、scroll または auto

2) min-width: any value

3) max-width: none 以外の任意の値

IE6 のレイアウトが原因でよく発生する問題は次のとおりです:

1) レイアウトのある要素は縮小しません。つまり、要素にサイズが設定されている場合、および要素 コンテンツが要素のサイズを超えると、通常、IE6 ではコンテンツが収まるように要素が拡張されます。

2) レイアウト要素はフロートを自動的にクリーンアップします。一般的な例は、テキストの段落にレイアウトがある場合、テキストが画像を囲まなくなります。

3) 相対的に配置された要素にはレイアウトがありません

4) レイアウトのある要素間でマージンが重なりません

5) レイアウトのないブロックレベルのリンクでは、クリック領域はテキストのみをカバーします

6) スクロール中、リスト項目の背景画像が断続的に表示されたり消えたりします

2. ハックとフィルター

1) IE の条件付きコメント

a) IE5 以降に適用可能

b) IE6 に適用

c) は IE6 より低いです

-->

2) アスタリスク HTML ハックを適用します

IE6 以前のバージョンでは、は html 要素を囲む匿名のルート要素であるため、この匿名のルート要素を使用して、

* html { width: 1px }

; などの特定のルールを IE6 以前のバージョンのブラウザに適用できます。セレクターハック

古いバージョンの IE ではサブセレクターが理解されない機能を使用して、最新のブラウザーにのみ適用されるルールを作成します

html>body { background -image: url(bg.png) }

ブラウザーのみサブセレクターをサポートするものは、このルールを適用できます

3. 一般的なバグとその修正

1) ダブルマージンフローティングバグ??IE6 以前のバージョン

バグ: フローティング要素のマージンを 2 倍にする

修正: 要素のマージンを設定します表示プロパティをインライン化する

2) 3 ピクセルのテキスト オフセットのバグ?? IE6 以前

バグ: 非浮動要素が浮動要素に隣接する場合、2 つの要素の間に 3 ピクセルのギャップが自動的に追加されます

修正: 方法 1: 非フローティング要素をフロートに設定する; 方法 2: 非フローティング要素のルールを設定する: _zoom: 1; _margin-left: value-3px; 、下線は IE7 の下位バージョンのハックです)

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

バグ: 1 フロート要素の後に非フロート要素が続き、その後にクリアフロート要素が続き、すべてが含まれています背景色または背景画像を持つ親要素内。非フロート要素は親要素によってカバーされ、再ロードするまで表示されません。

修正: 方法 1: 親要素の背景色または画像を削除する; 方法 2: フローティング要素がフローティング要素と接触しないようにする; 方法 3: 親要素の行の高さを指定する; 方法 4: 位置を変更するフローティング要素と親要素のプロパティは相対に設定されます。

4) 相対的に配置された要素の絶対配置エラー?? IE6 以前のバージョン

バグ: 相対的に配置された親要素には絶対的に配置された子要素が含まれており、子要素を配置するときの参照オブジェクトは親要素ではなくビューです口。 (IE6 では、相対的に配置された要素にはレイアウトがありません)

修正: 相​​対的に配置された親要素にレイアウトを強制します (_height: 1%; などの幅または高さを設定します)