誰もが、IE6 の 3 ピクセル ギャップ、IE5/6 の Float-Margin の二重バグなどの一般的な CSS バグの処理に比較的慣れていると思います。しかし、複雑な CSS BUG 問題に遭遇することはよくあります。いわゆる「複雑」とは、本質的にトリガー条件が非常に複雑であることを意味し、「BUG」は必ずしもブラウザの BUG であることを意味するわけではありません。この種の問題の場合、最初に解決する必要があるのは、問題を迅速に特定することによってのみ、問題をより適切に解決することができます。
簡単に位置を特定するために、私の個人的な経験は一般的に次のとおりです (基本的に、淘宝網で遭遇した複雑な CSS バグの問題の 90% 以上を見つけることができます):
1. ページのラベルが閉じているかどうかを確認します。
これを過小評価しないでください。ご迷惑をおかけするかもしれませんが、CSS のバグの問題は毎日解決されていません。結局のところ、ページ テンプレートは通常、開発者によってネストされており、そのような問題が簡単に発生する可能性があります。
簡単なヒント: Dreamweaver を使用してファイルを開いて確認できます。通常、閉じたタグがない場合、そのタグは黄色の背景で強調表示されます。
2. スタイルの除外方法:
一部の複雑なページでは、N 個の外部リンク CSS ファイルが読み込まれ、CSS ファイルを 1 つずつ削除し、BUG によってトリガーされた特定の CSS ファイルを見つけて、ロックの範囲を狭めることがあります。
ロックされたばかりの問題のある CSS スタイル ファイルについては、特定のスタイル定義を 1 行ずつ削除し、特定のトリガー スタイル定義、さらには特定のトリガー スタイル属性を見つけます。
3. モジュールの確認方法
ページの HTML 要素から開始することもできます。ページ内のさまざまな HTML モジュールを削除し、問題の原因となっている HTML モジュールを見つけます。
4. float がクリアされているかどうかを確認します。
実際には、float がクリアされていないことが原因で発生する CSS のバグの問題が数多くあります。フロートをクリアする良い習慣を身に付ける必要があります。追加の HTML タグを使用せずにフロートをクリアする方法を使用することをお勧めします (フロートをクリアするために overflow:hidden;zoom:1 などの同様のメソッドを使用するのは制限が厳しすぎるため避けてください)。 ）。
5. IE で haslayout がトリガーされるかどうかを確認します。IE
での多くの複雑な CSS バグは、IE の固有の haslayout と密接に関連しています。 haslayout に精通し、理解していれば、複雑な CSS バグに対処する労力を半分にして、2 倍の結果を得ることができます。 old9 によって翻訳された「レイアウトを持つことについて」を読むことをお勧めします (素晴らしい GFW を越えられない場合は、青の再投稿を読むことができます)
クイック ヒント: haslayout がトリガーされた場合、IE のデバッグ ツール IE 開発者ツールバーのプロパティレイアウト値が -1 の場合に表示されます。
6. 境界線と背景のデバッグ方法は、
その名前が示すように、デバッグ用の要素に目立つ境界線または背景 (通常は黒または赤) を設定します。この方法は、CSS BUG のデバッグに最も一般的に使用される方法の 1 つであり、複雑な BUG にも引き続き適用できます。手頃な価格で環境に優しい^^
最後に皆さんに強調したいのは、良い文章を書く習慣を身につけ、余分なタグを減らし、セマンティックを心がけ、標準に準拠することで、多くの場合、余分な複雑な CSS バグを大幅に節約できるということです。 、それは、私たちは自分自身のために問題を作成します。皆さんが虫から遠ざかって、より良い生活を送れることを願っています。