CSS ハック百科事典_html/css_WEB-ITnose

1. CSS ハックとは何ですか?

CSS ハックでは、CSS スタイルに特別な記号を追加することで、さまざまなブラウザーがさまざまな記号を認識できるようになります (ブラウザーがどの記号を認識するかについての標準があります)。CSS ハックは、この標準を覚えさせるためのものです。 ) .kwstu{width:300px;_width:200px;} などのさまざまな CSS スタイルを適用する目的を達成するために、ブラウザーは最初に width:300px; スタイルを使用し、次に _width:200px; を使用します。 _width は IE6 でのみ認識され、このスタイルは実際には IE6 でオブジェクトの幅を 200px に設定し、後者のスタイルは前のスタイルを上書きし、他のブラウザでは _width スタイル _width:200px; を認識しません。したがって、他のブラウザで設定されているオブジェクトの幅は 300px です。

以下は、Baidu Wenku から引用した定義です

簡単に言うと、CSS ハックは各バージョンを指します。また、Web コンテンツ内のエラーの処理 (私たちが頻繁に行うような位置ずれなど) さまざまなブランドのブラウザ間で CSS を解釈した後。各ブラウザのカーネルが異なるため、JS と同様に、JS Web ページの効果は Microsoft IE6、IE7、および IE8 ブラウザでは有効ですが、Mozilla Firefox および Google Chrome では有効ではない場合があります。この方法は JS ハックと呼ばれ、CSS の場合、ブラウザごとに異なる CSS の解釈方法の違いを解決するためにこれらを使用します。これは、CSS ハックと呼ばれます。

注: 通常、考慮されるブラウザには、IE6、IE7、IE8、Google Chrome (Chrome)、および Mozilla Firefox が含まれます。一般的に使用される Maxthon および QQ TT ブラウザについては、システムにインストールされている必要があります。ブラウザ カーネルと互換性があるため、TT Maxthon ブラウザと互換性があるためには、上記のブラウザと互換性があるだけで済みます。

2. CSS ハックは問題を解決します

CSS ハックは、一部の CSS 属性が異なるブラウザーで異なる効果を表示するという問題を解決するために使用されます。たとえば、IE6 の margin 属性によって表示される距離が表示される距離よりも小さくなります。他のブラウザでは、距離は 2 倍になります。これは、margin-left:20px を意味します。IE6 では、左側のオブジェクトからの実際の表示距離は 40px ですが、IE6 以外では、左側のオブジェクトからの表示距離が設定値になります。 20px; なので、必要に応じて、すべてのブラウザで左側のオブジェクトからのオブジェクトの距離を 20px の幅に設定するスタイルは、.kwstu{margin-left:20px;_margin-left:20px;} にする必要があります。

3. ブラウザ認識文字標準対応表

上の図から、次の状況を分析できます:

1. ほとんどの特殊文字は、Firefox、Chrome などの他の主流ブラウザでサポートされています。 、および opera 、 safari はサポートしません（opera が認識できる場合を除く）。
2.9 : すべての IE ブラウザーが
3._ をサポートし、 - : IE6 のみが
4 をサポートします。* : IE6 および E7 は
5 をサポートします。

【説明】: IE7は「*」と「!重要」を認識できますが、IE6は「*」のみ認識できますが、「!重要」は認識できません。 Firefoxに関しては、「!重要」は読み取れますが、「*」は認識できません。したがって、このような違いを利用して、IE6、IE7、Firefox を効果的に区別できます。

5. IE7 と Firefox の違い

[違いの記号]: "*"、"!重要"

#tip{
background:blue;/*Firefox の背景が青になります*/
*background:green! important;/*IE7 の背景が緑色になる*/
}

[説明]: Firefox は「! important」は認識できますが、「*」は認識できないのに対し、IE7 は「*」と「! important」を同時に理解できるためです。したがって、2 つの識別記号を使用して IE7 と Firefox を区別できます。

6. IE6とIE7の違い(方法1)

[違い記号]: "*"、"_"

#tip{
*background:black;/*IE7の背景が黒になる*/
_background : orange;/*IE6 の背景がオレンジ色になります*/
}

【説明】: IE7 と IE6 はどちらも「*」(米文字サイズ) を認識できますが、IE6 は「_」(下線) を認識できますが、IE7 は認識できません. IE6とIE7の違いは、IE7では「_」が読めないという特徴を利用すると簡単に見分けることができます。

7. IE6とIE7の違い(方法2)

[違い記号]: "! important"

#tip{
background:black! important;/*IE7の背景は黒になります*/
background:orange ; /*IE6 の背景がオレンジ色に変わります*/
}

[説明]: IE7 は「! important;」を読み取ることができますが、IE6 では読み取ることができず、CSS の読み取りステップが上から下にあるため、IE6 では異なる方法で読み取られます。 " は認識できず、次の行に直接ジャンプして CSS を読み込むため、背景色がオレンジ色になります。

8. IE6 と Firefox の違い

[違い記号]: "_"

#tip{
background:black;/*Firefox の背景が黒になります*/
_background:orange;/*IE6 の背景がオレンジになります*/
}

【説明】: IE6 は「_」(下線) を認識できますが、Firefox は認識できないため、この違いを利用して Firefox と IE6 を区別し、CSShack を効果的に実現できます。

5. IE ブラウザーでのハッキングの概要

color: #6669; //IE8 IE9
* color: #999; //IE6
}
はい文字認識では IE8 と IE9 を区別できないことがわかります。

color: #6669; //IE8

* color: #999; #6669;}//IE9

[説明]: ":root" 疑似タイプ IE シリーズは IE9 でのみサポートされており、他の主流ブラウザーではこれを使用して IE8 と IE9 を区別します。また、opera が root を部分的にサポートしていることと完全にサポートしていることを考慮すると、root は使用されません。


6. 他の主流ブラウザの CSS ハックの概要

1. Firefox ブラウザ:

mozilla プライベート プロパティ

@-moz-document url-prefix(){ .element{color:#f1f1f1;}} //Firefox

2. Webkit と Opera:

@media all and (min-width: 0px) { .element{color:#777;} }//Webkit

@メディア画面と (-webkit-min-device-pixel-ratio:0)

{.element{color:#444;}}

/ /Opera

@media すべてと (-webkit-min-device-pixel-ratio:10000)、すべてではなく (-webkit-min-device-pixel-ratio:0) {
.element{color:#336699;}
}


7. すべての主要な主流ブラウザー (最新バージョン) と互換性のある CSS ハックの概要は次のとおりです (最も完全なもの):


.element{
color:#000;]; /*Webkit( chrome と safari)*/

color:#6669; }

:root .element{color:#0f09;} /*IE9*/@media all and (-webkit-min-device-pixel-ratio:10000),すべてではなく、 (-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}} /*opera*/

@-moz-document url-prefix(){ .element{color :#f1f1f1;}} /*Firefox*/

8. 提案: 実際の開発についてよくわからない場合は、まずブラウザ テスト ツール (一般的に推奨されるツール IETEST) を使用してテストできます。ブラウザの各バージョンのレイアウトに問題がある場合は、問題のあるデバイスを個別にデバッグできます。