Xiaojie_html/css_WEB-ITnose と互換性のある div+CSS

IE6 と FF の違い:
background:orange;*background:blue;
IE6 と IE7 の違い:
background:green ! important;background:blue;
IE7 と FF の違い:
background:orange; ; *背景:緑;
FF、IE7、IE6 の違い:
背景:オレンジ;*背景:緑 !重要;*背景:青;

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







3.実際のピクセル数
IE/Opera: オブジェクトの実際の幅 = (margin-left) + width + (margin-right)
Firefox/Mozilla: オブジェクトの実際の幅 = (margin-left) + (border-left) -width) + (padding-left) + width + (padding-right) + (border-right-width) + (margin-right)
4. マウスジェスチャーの問題: FireFox のカーソル属性はハンドをサポートしていませんが、ポインターはサポートしています。 、IE は両方をサポートしているため、互換性のためにポインターが使用されます
5. FireFox で HTML タグの Style 属性を設定する場合は、すべての位置、幅、高さ、サイズの値の後に px を付ける必要があります。という書き方なので一律にpx単位が加算されます。たとえば、Obj.Style.Height = imgObj.Style.Height + 'px'; FireFox は、padding 5px 4px 3px 1px などの短縮されたパディング属性設定を解析できません。
7. ul や ol などのリストのインデントを削除する場合は、list-style:none;margin:0px; のように記述する必要があります。 Padding:0px; margin 属性は IE 有効に適しており、Padding 属性は FireFox
8 で有効です。 IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); : 不透明度:0.6;
9. CSS コントロールの角丸: IE : 角丸はサポートされていません。
-moz-border-radius-topleft:4px; border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
10. CSS の二重線の境界線: border:2px アウトセットFireFox:
-moz-border-top-colors: #d4d0c8 ホワイト;
-moz-border-left-colors: #404040 #808080; -bottom-colors:#404040 #808080;
11. IE は CSS をサポートします。カーソル:url() メソッドは、上記の 2 つのスタイルをサポートしません。選択コントロールは常に一番上にあり、すべての CSS は選択コントロールでは機能しません
13. IE は、画像やテキスト コンテンツを含むフォーム内のラベル タグをサポートします。FireFox は、画像を含むラベルをサポートしません。または、チェックボックスにラベルを付けて効果を持たせます
14. FireFox の TextArea は、onScroll イベントをサポートしません
15。FireFox が Div に対して margin-left と margin-right を auto に設定する場合、すでに中央揃えになっていますが、IE では機能しません
17. FireFox が Body に text-align を設定する場合、Div は margin: auto (主に margin-left margin-right) を設定する必要があります。ハイパーリンクの CSS スタイルを L-V-H-A の順序で設定します。それは

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

まず CSS について。インターネット上にはハッキング方法の紹介がたくさんあり、初心者は混乱してしまうことも多いです。これらの CSS ハック方法の中には、非常に特殊な状況を対象としたものもあれば、比較的一般的な方法もあります。

後者については、日々の勉強や仕事で注意を払って収集することができます。前者については、問題に遭遇したときにオンラインで検索するだけで十分です。
ここでは、より一般的なハック方法を示します。たとえば、CSS の特定の属性に対して、ブラウザごとに異なる値を設定したいと考えています。たとえば、特定の div の幅を Firefox では 50 ピクセル、IE では 60 ピクセルにしたいとします。では、どうすればそれを達成できるのでしょうか？次のコードを見てください:

#demo div{

width:50px; /* FireFox 有効*/
+width:60px; /* IE 有効*/
}

上記のコードでは、行 2 の幅が: 50px これは通常のスタイルです。次の行で、width 属性の前にプラス記号を追加します。このスタイルは Firefox では無効とみなされますが、IE ではプラス記号は無視されるため、幅として認識されます。これにより、Firefox と IE を区別できるように、以前の設定が上書きされます。

それでは、IE 6 と IE 7 をさらに区別したい場合はどうすればよいでしょうか?次のコードを参照してください:

#demo div{

width:50px; /* FireFox 有効*/
+width:60px; /* IE 7 有効*/
_width:70px;

上記のコードは 3 つのブラウザを区別できます。 IE7 では、属性の前にプラス記号が追加された場合はプラス記号が無視され、属性の前にアンダースコアが追加された場合はスタイル全体が無視されるため、3 つの主流ブラウザーの区別が実現されます。

この時点で、どのような状況でこの方法がブラウザを区別するために使用されるのかを当然考えます。通常、私たちが作成したいページには 2 つの状況があります。1 つは最初から作成する場合、もう 1 つは既存の Web ページに基づいて変更または修復する場合です。

最初のケースでは、Web ページのあらゆる詳細を明確に把握しているため、Firefox と IE との互換性の問題が発生することはほとんどありません。たとえ問題が発生したとしても、通常は他の方法で問題を解決できます。 2 番目のケースでは、Web ページが非常に複雑である可能性があり、カスケード関係も非常に複雑であるため、後から引き継ぐ人にとって、Web ページに何層の設定があるかを把握するのは困難です。特定の属性が影響しているため、「石膏を塗る」ことでしか修復できない場合が多い。
例えば、以下のページの最終効果ですが、角丸ボックスを作成する際、IEでは角丸を揃えた後、Firefoxでは図のようにズレが生じますが、Firefoxで調整すると、 Firefox では表示されますが、IE では再び位置ずれが発生します。
ページのコンテンツはレイヤーごとにネストされており、詳細が分からないと問題の原因を見つけるのは困難です。したがって、ここでパッチング方法を使用すると非常に便利です (これは最も洗練された完全な方法ではありませんが)。たとえば、丸い画像の位置を制御する属性については、上記の方法を使用して個別に制御します。
要約すると、上で述べたように、任意の属性に対してプラス記号または下線の方法を使用して、さまざまなブラウザーに個別の設定を実現できます。もちろん、最終的には、ハッキング手法は慎重に使用する必要があることを指摘しなければなりません。そのようなコードは、より読みやすく保守しやすくなり、それが私たちの目標でもあります。追求する。

IE6 では div+css は問題ないのに、filfox では問題が発生し、深刻に調子が悪くなるのはなぜですか? ありがとうございます

IE と FF の最大の違いは 1 です。解像度 1024 では、IE は最大 1002PX を表示し、FF は 1005PX2 を表示します。 IE は非常にフォールト トレラントです。つまり、間違ったコードを記述して記述を少なくすると、正しい FF が表示される可能性があります~~~`初心者によくある問題: 浮動小数点数がクリアされない~~~~.clear{ clear:両方; 高さ: 1px; トップ: -1px; 各フロートの後に

を追加します

詳細なソース参照: http://www.jb51.net/article /20943.htm