div CSS 互換性の概要_エクスペリエンス交換

IE6 と FF の違い:
background:orange;*background:blue;
IE6 と IE7 の違い:
background:green ! important;background:blue;
IE7 と IE7 の違いFF:
背景 :orange; *background:green;
FF、IE7、IE6 の違い:
background:orange;*background:green !重要;*background:blue;
IE7、IE8互換性:

HEAD
1. いくつかのブラウザは CSS の異なるキーワードをサポートしており、ブラウザの互換性は繰り返し発生する可能性があります。
!重要は FireFox と IE7 で認識できます
* は IE6 と IE7 で認識できます
_ は IE6 で認識できます
* IE7 で認識できます
2. IE-特定の条件付きコメント







3. いくつかのブラウザによる実際のピクセルの解釈
IE/Opera: オブジェクトの実際の幅 = (margin-left ) 幅 (margin-right)
Firefox/Mozilla: オブジェクトの実際の幅 = (margin-left) (border-left-width) (padding-left) width (padding-right) (border-right-width) ( margin-right) 4. マウス ジェスチャの問題: FireFox のカーソル属性はハンドをサポートしていませんが、ポインタはサポートしており、IE は両方をサポートしているため、互換性のためにポインタが使用されます。
5. Style 属性を設定する場合FireFoxのHTMLタグのすべての位置、幅、高さ、サイズの値の後にpxを付ける必要がありますが、IEでもこの書き方に対応しているため、一律にpx単位が付加されます。例: Obj.Style.Height = imgObj.Style.Height 'px';
6. FireFox は、padding 5px 4px 3px 1px などの省略されたパディング属性設定を解析できません。padding-top:5px に変更する必要があります。 ;padding-right:4px;padding-bottom:3px;padding-left:1px0;
7. ul や ol などのリストのインデントを削除する場合、スタイルは list-style:none;margin のように記述する必要があります。 :0px;padding:0px;where margin このプロパティは IE で有効であり、padding プロパティは FireFox
8 で有効です。CSS コントロールの透明度: IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity =60); FireFox: opacity:0.6;
9 .CSS は角丸を制御します: IE: 角丸はサポートされません;
FireFox: -moz-border-radius:4px; または
-moz-border -radius-topleft:4px;
-moz-border- radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px; 10. CSS 二重線バンプボーダー: IE: border:2px outset;
FireFox:
-moz-border-top-colors: #d4d0c8 White;
-moz-border-left-colors : #d4d0c8 white;
-moz-border-right-colors :#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;
11. IE は CSS メソッド カーソルをサポートしています:url() カーソル スタイル ファイルとスクロール バーのカラー スタイルをカスタマイズします。FireFox はサポートしています。上記の両方はサポートされていません。
12. IE には、Select コントロールが常に最前面に表示され、すべての CSS が機能しないというバグがあります。選択コントロール
13. IE は、画像やテキスト コンテンツを含む、フォーム内のラベル タグをサポートします。; FireFox は、画像を含むラベルをサポートしません。画像をクリックしても、Radio または CheckBox ラベルのラベルは効果を持ちません。
>14. FireFox の TextArea は onScroll イベントをサポートしていません
15. FireFox は表示のインラインとブロックをサポートしていません
16. FireFox が Div で margin-left と margin-right を auto に設定すると、すでに
17. FireFox が Body に text-align を設定するとき、Div は中央揃えの前に margin: auto (主に margin-left margin -right) を設定する必要があります。
18. するのが最善です。ハイパーリンクの CSS スタイルを L-V-H-A の順序で設定します。つまり

これにより、訪問後の一部のハイパーリンクにホバー スタイルやアクティブ スタイルが適用されないことを回避できます。
19. CSS で自動的に折り返されるように長い段落を設定するIE では FireFox で word-wrap:break-word を設定します。これを実現するには、JS 挿入メソッドを使用します。具体的なコードは次のとおりです:

20. フローティング属性をサブコンテナに追加した後、コンテナ自動的に開くことはできません
解決策: CSS clear:both; を追加します
21. フローティングの後、IE6 はタグ終了後の次のタグの外側のマージンを実際のマージンの 2 倍として解釈します
解決策: display:inline を追加します
22. IE6 では画像の下に隙間ができます
解決策: display:block を img に追加するか、vertical-align 属性をvertical-align:top |bottom |middle |text- に設定します一番下
23. IE6 では 2 つのレイヤー間にギャップがあります
解決策: 右の div を float:left に設定するか、IE6 を基準にして margin-right:-3px; を定義します。
24. その後LI のコンテンツが長さを超えています。省略記号を表示する方法

25. 要素の高さを次のように変換します。行の高さを同じ値に設定して、テキストを垂直方向の中央に配置します。

26. テキストとテキスト入力ボックスを整列させるには、vertical-align を追加する必要があります。 :middle; CSS の属性設定



29. IE6 では、デフォルトの行の高さの問題により、高さ約 1px のコンテナを定義できません。
解決策: CSS でコンテナを次のように設定します: overflow:hidden |zoom:0.08 | line-height:1px 30.透明属性を Flash に設定すると、レイヤーを Flash の上に表示できるようになります