作業中に発生したブラウザの違い (IE6bug とは呼ばれません)_html/css_WEB-ITnose

1. IE のバージョンに従って CSS を記述します

非 ie: if gt IE 8; if gte IE 8; 以下IE 8;

2. display:table-row;

について

たとえば、table 内の tr は、document.getElementById('theBlueRow') で表示するかどうかを制御します。 ' と表示:なし。 IE6 はテーブル行をサポートしていないため、代わりに display='' を使用してください。それでおしまい。

3. 設定ノードのカスタム属性を取得します:

の場合。

カスタム属性 myAttr を取得します:

document.getElementById("newTest").myAttr の場合、IE6 と IE8 でのみ有効であり、IE9、IE10、chrome、firefox、および safari では無効です。 document.getElementById(" newTest").getAttribute('myAttr') の場合はすべて有効です。

カスタム属性を設定します:

If document.getElementById("newTest").myAttr = "new";

alert(document.getElementById("newTest").myAttr+","+document.getElementById('newTest' ) .getAttribute('myAttr'));

出力結果: IE9、IE10、firefox、chrome、safari はすべて新しい、古い。 IE6 と IE8 は、新しい、新しいです。

If document.getElementById("newTest").setAttribute("myAttr","new");

alert(document.getElementById("newTest").myAttr+","+document.getElementById('newTest')。 getAttribute('myAttr'));

出力結果: IE9、IE10、firefox、chrome、safari はすべて未定義、新規です。 IE6 と IE8 は、新しい、新しいです。

そのため、カスタム属性を取得および設定するときは、同じメソッドを使用します: .getAttribute('myAttr') および .setAttribute("myAttr", "new"); jquery メソッド .attr(); を使用します。

4. IE6 および 7 では、 の場合、td の境界設定は無効です。

の場合、td の境界設定は有効です。

(IE6 および 7 では、tr Border の設定は常に無効です。)

5. IE6 では、位置: 絶対/固定の div は選択範囲をカバーできません。

解決策: 絶対に配置された div と同じサイズの iframe で選択をカバーします。

iframe の高さと幅を同時に 100% にすることはできません。

6. IE6 がposition:fixed; をサポートしていない場合の解決策:

IE6 がposition:fixedをサポートしていないバグを完全に解決するための純粋なリファレンス

しかし、スライドすると、fixeDiv があるべき場所にあることは明らかです。振動、その理由は「

?

」です。IE には複数段階のレンダリング プロセスがあります。ブラウザをスクロールまたはサイズ変更すると、すべてがリセットされてページが再描画され、その時点で CSS 式が再処理されます。これにより、醜い「振動」バグが発生する可能性があります。固定位置の要素は、(ページの) スクロールに合わせて調整する必要があり、その結果「ジャンプ」します。

この問題を解決するコツは、background-attachment:fixed を使用して、本文または HTML 要素に背景画像を追加することです。これにより、ページは再描画する前に CSS を処理するようになります。再描画する前に CSS を処理するため、再描画する前に最初に CSS 式も処理されます。これにより、完全にスムーズな固定位置要素を実現できるようになります。

' に次のコードを追加すると、振動は完全に見えなくなります:

テストには を直接使用しないでください。