WebページのレイアウトではIE6の互換性の問題を考慮する必要があります

下の図は、当社のウェブサイト統計システムの訪問者詳細におけるブラウザ閲覧率を示しており、IE6 が 40% 以上を占めています。ブラウザには多くの種類がありますが、IEだけでもIE5.5、IE6、IE7、IE8など複数のバージョンがあります。これらの多くの上位バージョンの中で、IE6は依然としてほとんどのユーザーに人気があるため、組版時にIE6の互換性を考慮する必要があります。そうしないと、多くの訪問者を失うことになります。

IE6 で注意しなければならない 10 個の問題は次のとおりです。

1. DOCTYPEを使用する
HTML ページの先頭に DOCTYPE タイプを追加する必要があります。もちろん、厳密なバージョンが推奨されます。例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
「http://www.w3.org/TR/html4/strict.dtd」

または、XHTML ページの場合は、!DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

最も望ましくないことは、IE6 が奇妙な動作モードに入ることです。しかし、IE6 にはすでに十分な奇妙な動作があります。

2. 位置の設定: 相対
position:relative を設定すると、特に配置を設定する必要がある場合に、複数の問題が解決されます。明らかに、理解しておく必要があるのは、絶対的な位置付けは相対的であるということです。おそらく、設定していないので、すべてがどこに行ったのかわからないのでしょう。たとえば、各記事の前に写真をデザインしたのに、最終的にページ上に写真が 1 つしかなく、写真が重なり合っていることが判明したとします。

3. フローティング要素に display:inline 値を設定する これは、有名な IE6 の二重マージンのバグによるものです。たとえば、フローティング DIV を設計し、margin-left:5px; を設定した場合、IE6 では margin-left:10px になる可能性があります。ここで、フローティング要素に display:inline; を設定すると、問題を解決できます。

4. 要素にhasLayoutを設定する
IE6 (または IE7) の問題の多くは、hasLayout 値を設定することで解決できます。 (hasLayout が何であるかわからない場合は、ここを参照してください)

要素の hasLayout 値を設定する最も簡単な方法は、CSS の高さまたは幅を追加することです (もちろん、ズームも使用できますが、これは CSS の一部ではありません)。特定の値を設定することが推奨されますが、必ずしも高さがわからない場合もあります。ここでは、height:1% を使用します。親要素に高さが設定されていない場合、要素の物理的な高さは変更されませんが、hasLayout プロパティが既に存在します。

5. 文字の重複の問題を解決する レイアウトが複雑な場合、一部のフローティング要素のテキストが、クリアされたフローティング位置の下に表示されることがあります。これは奇妙な問題ですが、解決方法は次のとおりです。

• フロート要素に display:inline が設定されていることを確認します。
•フローティング要素では margin-right:-3px を使用します。
• フロートの最後の要素の後に IE コメントを追加します。例: 
• 最後の要素に DIV を追加します (幅を 90% などに設定できます)
更新: 最も簡単な方法は、すべてのコメントを削除することです。 (ヒントを提供してくれたTian Weierに感謝します。私自身はこの問題に遭遇していませんが、Googleで検索したところ、この方法でも問題を解決できることがわかり、お勧めする価値のある方法です。)

詳細については、positioniseeverything.net をご覧ください。

6. ホバーは <a> タグ内でのみ使用します。IE6 はホバースタイルを表示するために <a> タグのみをサポートしています。もちろん、JS を使用してこの問題を解決することもできます。しかし、これによってアクセシビリティの問題が生じます。 JS を使用して実装されたホバーには重要なコンテンツを設定しないことをお勧めします。

7. !important または advanced セレクターを使用して IE ブラウザを区別します。たとえば、min-height を使用すると、CSS を使用せずに IE との互換性を実現できます。

＃要素 {
最小高さ: 20em;
高さ: 自動 !重要;
height: 20em; /* IE6 でこの高さを表示させます */
}

IE6 は min-height を正しく認識できないため、IE6 が 20em として解釈できるように固定の高さを設定できます。それでも、コンテンツのサイズが大きくなるにつれて高さは変化します。別のアプローチとしては、高度なセレクターを使用することです。

＃要素 {
最小高さ: 20em;
高さ: 20em;
}
/* IE6 を無視 */
#要素[id] {
高さ: 自動;
}

8. 比例サイズを避ける 親要素に正確な高さを追加しない限り、比例サイズは IE6 を混乱させます。それ以外の場合は、他の項目に !important を追加します。例:

体{
マージン: 2% 0 !重要;
margin: 20px 0; /* IE6 で読み取り可能 */
}

9. 早めにテストし、頻繁にテストする レベルが完了していない限り、早めにテストし、頻繁にテストすることを忘れないでください。そうしないと、IE6 の問題のトラブルシューティングにさらに時間がかかる可能性があります。一般的に言えば、Web サイトが IE6 と Firefox で適切に動作する場合、他のブラウザーでも大きな問題は発生しないと考えられます。

10. コードをリファクタリングする 多くの場合、問題の解決にはコードのリファクタリングよりも時間がかかります。