HTML の一般的な互換性の問題

1. PNG24 ビット画像が iE6 ブラウザの背景として表示される

解決策: PNG8 にするか、処理用のスクリプトを参照できます。

2. ブラウザのデフォルトのマージンとパディングが異なります

解決策: グローバル *{margin:0;padding:0;} を追加して統合します。

3. IE6 の二重マージンのバグ: IE6 では、要素が浮動小数点で、同時に margin-left または margin-right が設定されている場合、マージンの値が 2 倍になります。

1

#box{ float:leftwidth:10pxmargin:0 0 0 10px;} 

この場合、IE は 20px の距離を生成します。

解決策: _display:inline; を float ラベル スタイル コントロールに追加して、それをインライン属性に変換します。(_ この記号はie6でのみ認識されます)

4. 漸進的識別法では、全体から部分を徐々に排除します。 

まず、「\9」マークを巧みに使用することで、IE ブラウザをあらゆる状況から分離します。 

次に、再度「+」を使用して IE8 を IE7 および IE6 から分離し、IE8 が独立して認識されるようにします。

1

2

3

4

5

6

.bb{

    background-color:#f1ee18/*所有识别*/

    .background-color:#00deff\9/*IE6、7、8识别*/

    +background-color:#a200ff/*IE6、7识别*/

    _background-color:#1e0bd1/*IE6识别*/ 

5. IE では、通常の属性を取得するメソッドを使用してカスタム属性を取得することも、getAttribute() を使用してカスタム属性を取得することもできますが、Firefox では、getAttribute() を使用してのみカスタム属性を取得できます。

解決策: getAttribute() を通じてカスタム属性を均一に取得します。

6. IE では、イベント オブジェクトには x 属性と y 属性がありますが、pageX 属性と pageY 属性はありません。Firefox では、イベント オブジェクトには pageX 属性と pageY 属性がありますが、x 属性と y 属性はありません。

解決策: (条件付きコメント) 欠点は、IE ブラウザで追加の HTTP リクエストが追加される可能性があることです。

7. デフォルトでは、Chrome 中国語インターフェースは 12 ピクセルより小さいテキストを強制的に 12 ピクセルで表示します。

解決策: CSS 属性 -webkit-text-size-adjust: none; を追加することで解決できます。

8. ハイパーリンクにアクセスすると、ホバー スタイルは表示されなくなります。クリックして訪問したハイパーリンク スタイルは、ホバー表示されなくなり、アクティブになります。

解決策: CSS プロパティ LVHA の並べ替え順序を変更する

1

2

3

4

a:link {}

a:visited {}

a:hover {}

a:active {}

9. 奇妙なモードの問題: DTD ステートメントが省略された場合でも、Firefox は標準モードに従って Web ページを解析しますが、IE では奇妙なモードがトリガーされます。不必要なトラブルを引き起こす奇妙なパターンを避けるために、DTD 宣言を書く良い習慣を身に付けることが最善です。[html5](http://www.w3.org/TR/html5/single-page.html) を使用できるようになりました。推奨される記述方法: <!DOCTYPE html>

10. 上下マージンの重なりの問題: ie と ff の両方が存在します。2 つの隣接する div の margin-left と margin-right は重なりませんが、margin-top と margin-bottom は重なり合います。

解決策: 適切なコーディング習慣を身につけ、margin-top または margin-bottom を同時に使用します。

11. IE6 は png 画像形式を十分にサポートしていません。

解決策: 処理用のスクリプトを引用する

おすすめ

転載: blog.csdn.net/smallmww/article/details/132331184