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

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

 <!--[if lt IE 8]> <style> .cntContainer{margin-top: -1px;}  </style><![endif]-->

非 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 で選択をカバーします。

<div id='fixedDiv>    <div id='fixedDivContent'>div content</div>    <iframe scrolling='no' iframeborder='0' style='position:absolute;left:0;top:0;height:??px;width:100%;z-index:-1'>    </iframe></div>    

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

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

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

#fixedDiv{    position: fixed;top:0;left:0;}     /*for ie6*/*html #fixedDiv{ position:absolute;left:expression(eval(document.documentElement.scrollLeft+20));top:expression(eval(document.documentElement.scrollTop+20))} 

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

?

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

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

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

* html,* html body{background-image:url(about:blank);background-attachment:fixed;//不可少，防止画面闪烁}

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