海外には勉強になる優れた記事がたくさんあるので、時間をかけて翻訳してみることにしました。この記事を翻訳した人がいるかどうかはわかりませんが、元の名前は「10 Awful IE Bugs and Fixes」です。この素晴らしい記事をより多くの人に読んでいただけると幸いです。外国人はとてもユーモアがあるので全文読みました。専門家は回り道をする
以下はその翻訳です。
IE の一般的な 10 個のバグとその解決策をリストしました。これにより、IE でのレイアウトの不一致のデバッグに費やす時間が短縮されると思います。
著者:ケビン
導入
IE の扱いに関しては、人それぞれのストーリーがあります。開発者として、私は IE の多くの癖に対処する必要があり、時には壁に頭をぶつけたくなることもあります。しかし、時間が経つにつれて、私たちは多くのことを学び (時にはそれは私たちのせいではなく、IE のせいでした!)、IE の奇妙な動作を受け入れ、理解し始めました。依然として相当数の IE6 ユーザーが存在するため、これを行う必要があります。最善の方法は、最初からさまざまなブラウザで Web サイトを常にテストすることです。レイアウトの問題を最初から解決するほうが、数千行の HTML や CSS コードを作成した後で解決するよりもはるかに簡単です。
IE6 に抗議する多くの運動があり、大多数の Web 専門家やあまり気にしていないと思われる一般ユーザーによって支持されています。では、今何ができるでしょうか？ IE6 の問題を解決するには、調査を続ける必要がありました。しかし、待ってください。エキサイティングなニュースがあります。 w3cschool の月次レポートによると、IE6 ユーザーの数は年々減少しています。 2006 年 6 月の 60.3% から、2009 年 9 月には 13.6% に増加しました。この比率によると、2010年末までにIE6を廃止できるはずです（注釈：海外の状況は本当に良いですね～。～）。
さて、現実に戻りますが、今後の参考のために、これまでに遭遇したすべての問題のリストを作成しました。これにより、IE でのレイアウトの不一致のデバッグに費やす時間が短縮されると思います。
1. IE6 ゴースト テキスト (ゴースト テキストのバグ)
この記事を書く前に、このバグに遭遇しました。なかなか奇妙で面白いですね。どこからともなく重複したテキストが、IE6 では元のテキストに近く表示されます。 (注釈: バグのデモについては、 「Explorer 6 Duplicate Character Bug」を参照することもできます)。修正できなかったので検索したところ、やはり IE6 の別のバグでした。
これには多くの回避策がありますが、私の例ではどれも機能しませんでした (サイトの複雑さのため、いくつかの回避策は使用できませんでした)。そこでハックを使いました。元のテキストの後にスペースを追加すると、問題が解決するようです。
しかし、 Hippy Tech Blogで、この問題の原因は HTML コメント タグにあることがわかりました。 IE6では正しく表示できません。彼が提案した解決策のリストは次のとおりです。
解決：
2. 相対位置とオーバーフローの非表示
JQuery のチュートリアルを準備しているときに、希望するレイアウトを実現するために多くのオーバーフロー非表示を使用したため、この問題に何度も遭遇しました。
この問題は、親要素のオーバーフローがhiddenに設定され、子要素がposition:relativeに設定されている場合に発生します。
CSS-Trick には、このバグを示す素晴らしい例があります。位置:Internet Explorer の相対およびオーバーフロー
解決：
親要素にposition:relative;を追加します。
3. IEの最小高さ
それは単純で、IE は min-height 属性を無視します。以下のハックを使用して修正できます。ダスティン・ディアスに感謝します。
このソリューションは、IE6、Mozilla/Firefox/Gecko、Opera 7.x 以降、Safari1.2 で適切に動作します。
解決：
セレクター {
最小高さ:500ピクセル;
高さ:自動!重要;
高さ:500ピクセル;
}