ホームページ > 記事 > ウェブフロントエンド > CSS とは hack_html/css_WEB-ITnose
CSS とは hack_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:44994ブラウズ
由于不同的浏览器，比如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からの抜粋です
幅: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からの抜粋です
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。