CSS とは hack_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS とは hack_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:51:44

オリジナル

956 人が閲覧しました

由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如 IE6能识别下划线_和星号*，IE7能识别星号*，当不能识别下划线_，而firefox两个都不能认识。等等

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

如何写CSS Hack
比如要分辨IE6和firefox两种浏览器，可以这样写：

我在IE6中看到是红色的，在firefox中看到是绿色的。

説明:
上記の CSS は Firefox にあります。後ろにアスタリスク * が付いているものは認識できないため、分析の結果は div{background :green} になります。もちろん、この div の背景は緑色です。
IE6ではどちらの背景も認識でき、その解析結果は div{background:green;background:red;} となり、優先順位に応じて後ろの赤色の方が優先されますので、当然です、この div の背景色は赤です。

CSSハック: IE6、IE7、firefoxの区別
ブラウザの違い、CSSハックの書き方:

IE6とFFの違い:
背景:orange;*background:blue;

IE6とIE7の区別:
背景:緑 !重要;背景:青;

IE7 と FF の違い:
背景:オレンジ; *背景:緑;

FF、IE7、IE6 の違い:
背景:オレンジ; IE は * を認識できます。標準のブラウザー (FF など) は * を認識できません。
IE6 は * を認識できますが、
IE7 は * を認識できます。 !重要; √

もう 1 つ追加します。「_」に下線を付けます。
IE6 は下線をサポートしていますが、IE7 も Firefox も下線をサポートしていません。

このようにしてIE6、IE7、Firefoxも区別できます
background:orange; 真ん中に書いてあり、IE6は最後に書いてあります。

添付: さまざまなブラウザの CSS 互換性の列表

b{_flaot:left;} IE6
b{+flaot:left} IE6-7

b{float:left ! important;} IE6-8b FF
b{float:right;}

b{float:left !重要;float:right;} IE7-8b FF

/**//*/
b{float:left;} IE8b
/* * /

html*b{float:left;} IE6-7

body>b{float:left;} IE7-8b FF

html[xmlns] b{float:left;} IE7-8b FF

b ／*/*/float:left;/* */} IE6-7 FF

opaque< div : 100px;
幅:200px;
位置:相対;
}
#in{
背景:#fff;
マージン:0 10px;
}
#alpha{
位置:絶対;
上:0;
左:0 ; i 幅: 100%;
高さ: 100%;
-MS -フィルター: "PROGID: DXIMAGETRANSFOROSOFT.ALPHA (OPACITY = 30)" "; /*IE8* /
フィルター: アルファ Ty = 30) , IE5.5、IE6、IE7*/
不透明度: .3; /*Opera9.0+、Firefox1.5+、Safari、Chrome*/
z-index: /*そのままにしておきます */
背景:#fff;
}

この記事は「IT Learner」http:&www.itlearner.com/article/2009/4414.shtmlからの抜粋です