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 html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Doctypeの前にサードパーティの文字を許可しない自分から追加します。 スペースや改行はありません-そうでなければ、奇妙な本文とhtmlフィールドが表示されます

2.設定位置:相対


このハックを使用すると、IE6のレイアウトに関する膨大な数の問題を解決できます(たとえば、見えないブロックや奇妙な位置にあるブロックなど)。

3.ディスプレイの適用:フローティングブロックへのインライン


マージンのあるエレメントをフローティングすると、よく知られているIE6のダブルマージンバグが発生する可能性があります。
たとえば、左に5pxのマージンを指定すると、10pxになります。 表示:インラインは問題を修正し、CSSは有効なままです

4. hasLayoutプロパティを設定します


IE6(およびIE7)の多くのレンダリングエラーは、hasLayoutプロパティを設定することで修正できます。 これは、IEの内部機能(または松葉杖?、およそTransl。)であり、コンテンツを他の要素に対してどのように配置および配置するかを示します。 また、このプロパティは、文字列要素(<a>など)をブロック要素に変換したり、透明効果を適用したりする必要がある場合にも使用できます。

この値を設定する最も簡単な方法は、高さまたは幅を設定することです(ズームも使用できますが、このプロパティはCSS標準の一部ではありません)。 ブロックの実際の寸法を設定することをお勧めします。これが不可能な場合(高さが動的に変化する場合)、これを行うことができます:height:1px。 また、親ブロックに高さが設定されていない場合、要素の高さの値は変更されず、hasLayoutは既に有効になっています。

5.重複する文字を修正する


ああ、このバグ! リストの最後のアイテムの最後の1〜3文字が新しい行に複製されると、リストに表示されます。 いくつかの解決策があります。

-ディスプレイの使用:フローティング要素のインライン;
-マージン右を設定:-3px; リストの最後のアイテム。
-条件付きコメントを使用できます。
-リストの最後の要素に空のdivを追加します(場合によっては、幅を設定する必要があります:90%または別の適切な幅の値。

ここで、問題について詳しく知ることができます。

6.クリック可能な要素およびホバー要素にのみ「a」タグを許可します。


IEブラウザは独立しており、代わりに考えているため、これらの問題の他のタグを認識しません。
もちろん、javaスクリプトと組み合わせて他のタグを使用することもできますが、最適に機能します。

7.健全なブラウザ用の高度なCSSセレクター、IEまたは使用のための標準!重要


有効なコードを記述し、サードパーティのファイルを使用せずに、ロバと他のブラウザのスタイルを別々のスタイルに適用することができます。
IE6は 'min-height'を理解せず、高さを誤って切り替えます:autoから20em。

#element {
min-height: 20em;
height: 20em;
}
/* ignored by IE6 */
#element[id] {
height: auto;
}


8.フィールドのパーセンテージ値を避ける


関心がIEを混乱に陥れます。 を使用して、パーセント単位でサイズを書き続けることができます!他のブラウザーおよびピクセル単位のロバにとって重要です:

body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}


9.常に頻繁にテストする


IEのレイアウトを「後で」テストしないで放置しないでください。 問題の解決にはさらに時間がかかります。 FFおよびIE6でレイアウトが正しく表示されていれば、他のブラウザーで崩れることはありません。

10.リファクタリング


ただし、バグを修正する方が、問題領域を再度書き直すよりもはるかに長いことがよくあります。 多くの場合、よりシンプルなHTMLコードとシンプルなCSSの方が効率的です。

私自身から、人気のハッキング_margin、* marginについて追加します。これはIEのみが理解できますが、コードは有効ではないため、ブラウザーの更新を促進します。

これに触発され 。 無料翻訳。

画像

Source: https://habr.com/ru/post/J76962/


All Articles