さまざまなブラウザに対応したCSS Hackの書き方_html/css_WEB-ITnose

いわゆる CSS ハックとは、*、*html などのコードを CSS コードに埋め込んで、特定のブラウザーの特定のスタイルを独立して制御できるようにすることを指します。たとえば、一部の CSS ハックは IE6 または IE7 でのみ認識され、Firefox などのブラウザでは認識されません。このようにして、さまざまなブラウザーで CSS のパフォーマンスを効果的に制御し、複数の CSS ファイルの作成を回避できます。

Mango は、ページのレンダリングをより適切に制御できるように、一般的な CSS Hack の書き方をここに大まかにまとめています:

1. * 記号

IE ブラウザは * 記号を認識できますが、Firefox、Opera、Chrome などの他のブラウザでも認識できます。 * 記号は認識されません。

例: Firefox と IE では異なるテキストの色が表示されます:

color:red;*color:blue; //Firefox などの非 IE コアブラウザではテキストが赤で表示されますが、IE ではテキストが青で表示されます。 。

2. !重要

IE7 は * 記号だけでなく !重要 も認識できますが、IE6 は前者のみを認識します。

例: IE6 と IE7 では異なるテキストの色が表示されます:

color:red ! important;color:blue; //IE7 ブラウザではテキストが赤で表示されますが、IE6 ではテキストが青で表示されます。

1 と 2 を組み合わせると、上記のブラウザ機能を使用して、CSS で Firefox、IE7、IE6 を区別し、異なるスタイルを読み込むことができます。
例: Firefox、IE7、IE6 では 3 つの異なるテキスト色が表示されます:

color:blue;*color:red ! important;*color:green; //Firefox では、テキストは青で表示されます。 IE7 ブラウザでは赤色で表示され、IE6 では青色で表示されます。

4. *html と *+html
IE コア ブラウザは *html と *+html を認識できますが、Firefox などの非 IE コア ブラウザは認識できません。

例: Firefox、IE7、IE6 では 3 つの異なるテキスト色が表示されます:

#div {color:red;} *html #div {color:green;} *+html #div{color:blue;} //最初の文は Firefox などで正常に認識できるため、これらのブラウザのテキストは赤色になります。 //2 番目の文は IE6 で認識および実行でき、IE6 用に独自のスタイルを記述するために使用され、緑色になります。 text; //3 番目の文は IE7 でのみ正しく認識されますが、IE6 およびその他の非 IE コア ブラウザーでは認識できず、テキストは青色になります。