IE 6のバグの8つのテクニック
4638 ワード
1.設定position:relative
要素を「position:relative」に設定すると、特に隠れた箱や位置合わせの奇妙な箱に遭遇したことがある問題を解決できます.
2.フローティング要素をdisplay:inlineに設定する
marginプロパティを持つフローティング要素によって引き起こされる可能性のあるIE 6の2倍margin問題.たとえば、1つの要素にmargin-leftを5 pxと指定しますが、IE 6では実際には10 pxとして表示されます.」display:inline」はこの問題を解決します.もちろん、方法もこれだけではありません.
3.要素をhasLayoutに設定
多くのIE 6(およびIE 7)のレンダリング問題は、要素のhasLayoutを設定することによって解決することができる.他の要素に対して、コンテンツがどのようにレイアウトされ、配置されているかを決定します.リンクなどのinline要素をblock要素に設定するか、透明効果を適用する必要があります.
最も簡単なhasLayoutの設定方法はCSSに高さや幅を設定することです(zoomも使えますが、zoomはCSS規格の一部ではありません).実際のサイズを設定することをお勧めしますが、問題は現実的ではありません.「height:1%」を使用する必要があるかもしれません.親要素が高さを設定していない場合、要素の実際の高さは影響を受けず、hasLayoutが有効になります.
4.重複文字バグの修正
複雑なレイアウトは、フローティング要素の最後の文字が消去要素の下に現れるバグをトリガーします.ここにはいくつかの解決方法があり、いくつかは完璧ですが、いくつかの繰り返し実験をする必要があります.すべての要素が「display:inline; 最後の要素に「margin-right:-3 px;」を使用します. フローティング要素の最後のエントリには、次のような条件付きコメントが使用されます.
は、容器の最後の要素に空のdivを使用します(幅を90%または類似の幅に設定する必要もあります).
5.使用!importantまたは高度なセレクタはIE 6を区別する
従来のHackや追加ファイルでの条件CSSを使用しない方法で、特にIE 6のための実行可能なコードを書くことも可能である.たとえば、最小高さはこのコードで定義できます.
IE 6はmin-heightを理解せず、誤って20 emで「auto」の高さを上書きするが、コンテンツにより多くの空間が必要な場合、自動的に高さが増加する.
もう1つのオプションの方法は、e.gのような高度なセレクタを使用することである.
6.パーセンテージ単位の回避
パーセンテージはIEを混乱させます.各親要素のサイズを正確に制御できない限り、最適な予防が可能です.あなたは通過することができます!importantは、次のような他のブラウザでパーセンテージを使用し続けます.
7.早期にテストし、継続的にテストする
あなたのウェブサイトやアプリケーションが完成してからIE 6をテストしないでください.これでは問題がさらに悪化し、修正に時間がかかる可能性があります.あなたのサイトがFirefoxとIE 6で正常に動作している場合は、一般的に他のブラウザで問題はありません.
8.コードの再構築
よくあることは、バグの修正がレイアウトの問題を再考するよりも長い時間かかることです.HTMLに小さな変更や簡単なCSSが効果的であることが多い.これは、完璧なコードを放棄することを意味するかもしれませんが、長期的な問題が少なく、将来的にこれらの問題を処理すればよくわかります.
IE 8はIEを根本的に変更していないが、CSS規格へのサポートは確かに大きく変更されている.しかし、それでもIE 8の普及に期待できないのは頼りにならないことであり、頑固なIE 6ユーザーが必ずしもIE 8を受け入れるとは限らない.だから私たちは最近1年半もIE 6を無視することはできません.
要素を「position:relative」に設定すると、特に隠れた箱や位置合わせの奇妙な箱に遭遇したことがある問題を解決できます.
2.フローティング要素をdisplay:inlineに設定する
marginプロパティを持つフローティング要素によって引き起こされる可能性のあるIE 6の2倍margin問題.たとえば、1つの要素にmargin-leftを5 pxと指定しますが、IE 6では実際には10 pxとして表示されます.」display:inline」はこの問題を解決します.もちろん、方法もこれだけではありません.
3.要素をhasLayoutに設定
多くのIE 6(およびIE 7)のレンダリング問題は、要素のhasLayoutを設定することによって解決することができる.他の要素に対して、コンテンツがどのようにレイアウトされ、配置されているかを決定します.リンクなどのinline要素をblock要素に設定するか、透明効果を適用する必要があります.
最も簡単なhasLayoutの設定方法はCSSに高さや幅を設定することです(zoomも使えますが、zoomはCSS規格の一部ではありません).実際のサイズを設定することをお勧めしますが、問題は現実的ではありません.「height:1%」を使用する必要があるかもしれません.親要素が高さを設定していない場合、要素の実際の高さは影響を受けず、hasLayoutが有効になります.
4.重複文字バグの修正
複雑なレイアウトは、フローティング要素の最後の文字が消去要素の下に現れるバグをトリガーします.ここにはいくつかの解決方法があり、いくつかは完璧ですが、いくつかの繰り返し実験をする必要があります.
1
<!--[if !IE]>Put your commentary in here...<![endif]-->
5.使用!importantまたは高度なセレクタはIE 6を区別する
従来のHackや追加ファイルでの条件CSSを使用しない方法で、特にIE 6のための実行可能なコードを書くことも可能である.たとえば、最小高さはこのコードで定義できます.
1
2
3
4
5
#element {
min-height: 20em;
height: auto !important; /* */
height: 20em; /* IE6 /*
}
IE 6はmin-heightを理解せず、誤って20 emで「auto」の高さを上書きするが、コンテンツにより多くの空間が必要な場合、自動的に高さが増加する.
もう1つのオプションの方法は、e.gのような高度なセレクタを使用することである.
1
2
3
4
5
6
#element {
min-height: 20em;
height: auto !important;
height: 20em;
overflow: visible;
}
6.パーセンテージ単位の回避
パーセンテージはIEを混乱させます.各親要素のサイズを正確に制御できない限り、最適な予防が可能です.あなたは通過することができます!importantは、次のような他のブラウザでパーセンテージを使用し続けます.
1
2
3
4
body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}
7.早期にテストし、継続的にテストする
あなたのウェブサイトやアプリケーションが完成してからIE 6をテストしないでください.これでは問題がさらに悪化し、修正に時間がかかる可能性があります.あなたのサイトがFirefoxとIE 6で正常に動作している場合は、一般的に他のブラウザで問題はありません.
8.コードの再構築
よくあることは、バグの修正がレイアウトの問題を再考するよりも長い時間かかることです.HTMLに小さな変更や簡単なCSSが効果的であることが多い.これは、完璧なコードを放棄することを意味するかもしれませんが、長期的な問題が少なく、将来的にこれらの問題を処理すればよくわかります.
IE 8はIEを根本的に変更していないが、CSS規格へのサポートは確かに大きく変更されている.しかし、それでもIE 8の普及に期待できないのは頼りにならないことであり、頑固なIE 6ユーザーが必ずしもIE 8を受け入れるとは限らない.だから私たちは最近1年半もIE 6を無視することはできません.