次の図は、Webサイト統計システムの訪問者の詳細のブラウザ表示率を示しており、IE6は40%以上を占めています。ブラウザには多くの種類がありますが、IEだけでもIE5.5、IE6、IE7、IE8などなどのバージョンがたくさんあります。これらの多くのハイエンドバージョンの中で、IE6はほとんどのユーザーにまだ愛されているため、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がQuirkモードに入ることです。実際には十分な癖があります。
2。位置を設定:相対設定位置:特にアライメントを設定する場合、相対的な問題は複数の問題を解決します。明らかに、あなたが理解する必要があることの1つは、絶対的なポジショニングが比較的言及しているということです。たぶん、あなたはセットアップを持っていないので、すべてがそこに飛んだことを知らないからです。たとえば、各記事を設計すると、その前に写真があります。最後に、ページに写真が1つしかないことがわかります。
3.表示ディスプレイの設定:フローティング要素のインライン値これは、有名なIE6ダブルマージンバグに由来します。たとえば、Div用にフローティングを設計し、マージン左:5pxを設定する場合、IE6でマージン左:10pxである可能性があります。ここでは、表示:フローティング要素のインラインで問題を解決します。
4.要素のHaslayoutを設定します多くのIE6(またはIE7)の問題は、Haslayout値を設定することで解決できます。 (Haslayoutが何であるかわからない場合は、こちらをご覧ください)
要素のハスレイアウト値を設定する最も簡単な方法は、CSSの高さまたは幅を追加することです(もちろん、ズームも使用できますが、これはCSSの一部ではありません)。特定の値を設定することをお勧めしますが、必ずしも高さがそうであることを意味しない場合があります。ここでは、高さ:1%を使用できます。親要素が高さを設定しない場合、要素の物理的な高さは変わりませんが、すでにhaslayoutプロパティがあります。
5.繰り返される文字の問題を解決します複雑なレイアウトにより、フローティング要素内のテキストがクリーンアップフローティング位置の下に表示される場合があります。これは奇妙な問題であり、以下はあなたがそれを解決するのに役立ちます:
•表示:インラインが浮動要素に設定されていることを確認します。
•マージン右:フローティング要素で-3pxを使用します。
•フローティング要素の最後の要素の後にIEコメントを追加します。
•最後の要素にdivを追加します(これは幅を90%または他の同様の高さに設定することです)
更新:最も簡単な方法は、すべてのコメントを削除することです。 (Tian Wei'erが彼女のヒントをしてくれたことに感謝しますが、私は自分でそれに遭遇していませんが、GoogleでそれをGoogleで検索した後、この方法も解決できることがわかりました。これは推奨される方法です。)
Positioniseverything.netでこれについての詳細を確認できます。
6. <a>タグでホバーのみを使用します。IE6は<a>タグのみをサポートしてホバースタイルを表示します
もちろん、JSを介してこの方法を解決できます。ただし、これはアクセシビリティに関するものです。 JSを使用して実装されたHoverに重要なコンテンツを設定しないことをお勧めします。
7。IEブラウザを区別するために、重要または高度なセレクターを使用たとえば、Min-HeightはCSSを使用してIEとの互換性を実現することを避けることができます。
#要素 {
min-height:20em;
高さ:自動!重要。
高さ:20em; /* ie6にこの高さを表示させます*/
}
IE6は最小高さを正しく識別できません。固定された高さを設定して、IE6が20EMに解決できるようにすることができます。それでも、コンテンツのサイズにより高さが変わります。別の方法は、高度なセレクターを使用することです。
#要素 {
min-height:20em;
高さ:20em;
}
/ * IE6を無視してください */
#element [id] {
高さ:自動;
}
8。サイズのスケーリングを避けてくださいスケールは、親要素に正確な高さを追加しない限り、IE6を混同します。それ以外の場合は、他の人に重要です。たとえば、次のようになります。
体{
マージン:2%0!重要。
マージン:20px 0; /* IE6 Readable*/
}
9.できるだけ早くテストし、頻繁にテストしますレベルが完了しない限り、早めにテストし、頻繁にテストすることを忘れないでください。それ以外の場合は、IE6の問題を解決するのにもっと時間を費やすことがあります。一般的に、WebサイトがIE6とFirefoxでうまく機能することができる場合、他のブラウザには大きな問題がないと推定されています。
10。コードをリファクタリングします多くの場合、問題を解決するには、コードをリファクタリングするよりも時間がかかる場合があります。