CSSブラウザーの互換性に対処する正しい方法は何ですか？

StackOverflow https://stackoverflow.com/questions/808902

  •  03-07-2019
  •  | 
  •  

質問

ユーザーエージェントごとに異なるCSSファイルを使用する方が良いでしょうか、それとも特定のブラウザーのみが見ることができるCSSハックを使用する方が良いでしょうか？

役に立ちましたか？

解決

どちらでもない。

最良の方法は、ブラウザ固有のコードやcssハックを必要とせずに、すべてのブラウザで機能するコードを記述することです。もちろん、達成するのはそれほど簡単ではないため、多くの人が他の方法を使用しています。

重要なのは、一部のブラウザー（ほとんどの場合Internet Explorer）で問題が発生することを避けることです。 IEはマージンの折りたたみを正しく処理しないため、そのようなことの1つはマージンではなくパディングを使用することです。

ハッキングの境界線にあるいくつかのメソッドは、正常に動作するブラウザーには影響しないが、特定のブラウザーの問題を修正するコードを使用しています。通常は必要のない要素の高さを指定したり、フローティング要素にdisplay:inlineを指定したりすることができます。

位置がすべてのページには、いくつかのバグの例と修正案があります。 （多くの場合、修正は何らかのハッキングであるため、もちろん、問題を完全に回避できるかどうかも考慮する必要があります。）

他のヒント

どちらもしないほうがいい。

同じクロスブラウザで動作する優れたcss-resetとcssは、はるかに優れたソリューションです。

もしあなたのデザインがそれを絶対に排除するなら、それから（そしてその時だけ）私はハックやIEの条件付きコメントを試みます。

複数のcssファイルの必要性をまだ見ていません（条件付きコメントで対処されたIE6のいくつかの修正を超えています）。

可能であればどちらでもない。現在、古いNetscape、IE <！> lt; = 6などはあまり使用されていないため、これらのすべてのブラウザーで機能する機能を使用しようとしています（例：FF <！> gt; = 2、IE <！ > gt; = 7、Chrome、Opera）。

Internet Explorerの問題に関する

条件付きコメントが標準的なようです。 Dean Edwardのie7.js のような、少しのJavaScriptと組み合わせるCSSファイル内のハッキングに頼ることなく、ほとんどのクロスブラウザーの問題を軽減できます。

Internet Explorer 6-7で別のcssファイルを使用することをお勧めします（条件付きコメント）、および他のブラウザのハッキング。

フォローアップの一種は、機能する単一のファイルを開発する方法です。

私が見た最良のアプローチは、何もないところから始めてゆっくりと構築し、コアブラウザ（特に問題のあるブラウザ）でまだ互換性があることを変更ごとに確認することです。

1つのブラウザーで完全に機能するようになった後、<！> quot;変換する時間<！> quot;痛みが本当に始まり、ハッキングを開始する必要がある場所です。

私のアプローチ OS、ブラウザ、ブラウザのバージョンを検出するPHPクラス。あらゆるオペレーティングシステム上のほぼすべてのブラウザのあらゆるバージョンをターゲットにできます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top