如果你的web站點(diǎn)或應(yīng)用程序是供給不同的瀏覽器用戶使用的,,那么你可能就需要使用到CSS
Hack和CSS Conditional Comments,,本質(zhì)上CSS Conditional Comments是CSS
Hack的一種。如果你的web站點(diǎn)CSS不是特別復(fù)雜,,用CSS
Hack就能夠解決瀏覽器CSS兼容性問(wèn)題,,但是如果你的站點(diǎn)對(duì)用戶體驗(yàn)要求比較高或者設(shè)計(jì)非常絢麗,用CSS Conditional
Comments(CSS 條件注釋)將是你更好的選擇,。簡(jiǎn)單的來(lái)說(shuō),,CSS Hack是通過(guò)一些特殊的字符來(lái)區(qū)分IE6/7/8以及Firefox的,CSS Conditional Comments是給不同的瀏覽器加載不同的CSS文件(當(dāng)然,,這也可以用js來(lái)做),。
一、CSS Hack
CSS Hack是通過(guò)一些特殊的字符來(lái)區(qū)別IE 6, IE 7, IE 8和Firefox的,,瀏覽器對(duì)于不能識(shí)別的字符,,將會(huì)直接過(guò)濾掉,有很多字符能夠用于CSS Hack,,在這里有一個(gè)非常詳細(xì)的列表,,下面我只列出了一些比較常用的Hack字符。
|
IE6 |
IE7 |
IE8 |
FireFox |
_ |
√ |
× |
× |
× |
* |
√ |
√ |
× |
× |
*+ html |
× |
√ |
× |
× |
!important |
× |
√ |
√ |
√ |
\9 |
√ |
√ |
√ |
× |
@import ‘style.css’
@import “style.css”
@import url(style.css)
@import url(‘style.css’)
@import url(“style.css”)
|
√ |
√ |
√ |
√ |
1. _ * \9 !important
區(qū)別Firefox 和 IE 6
view source
print?
1 /*區(qū)別Firefox和IE 6*/
2 body{
3 background-color: red; /* Firefox */
4 *background-color: yellow; /* IE6/7 */
5 }
區(qū)別Firefox 和 IE 7
1 /*區(qū)別Firefox 和 IE 7*/
2 body{
3 background: orange;
4 *background: green;
5 }
區(qū)別IE 7 和 IE 6
1 /*區(qū)別IE 7 和 IE 6*/
2 /*ie7顯示綠色,ie6顯示藍(lán)色*/
3 body{
4 background: green !important;
5 *background: blue;
6 }
區(qū)別IE和Firefox
1 /*區(qū)別IE和Firefox*/
2 body{
3 background-color: red; /* 所有瀏覽器都支持 */
4 background-color: yellow\9; /* IE6/7/8 */
5 }
區(qū)別FF/IE8/IE7/IE6
1 /*區(qū)別IE6/7/8和其他瀏覽器*/
2 body{
3 background-color: red; /* 所有瀏覽器都支持 Firefox顯示紅色 */
4 background-color: green\9; /* IE6/7/8 IE8顯示綠色 */
5 *background-color: yellow; /* IE6/7 IE7顯示黃色 */
6 _background-color: blue; /* IE6 IE6顯示藍(lán)色 */
7 }
從上述代碼中,,可以看出,,書寫CSS Hack的順序?yàn)镕irefox<IE8<IE7<IE6,由高標(biāo)準(zhǔn)向低標(biāo)準(zhǔn)走,。
2.關(guān)于!important和*+html
引用:http://www./css-browser-hack/
優(yōu)先度: (*+html + !important) > !important > +html
1 #bgcolor {
2 background:red !important; /* Firefox 等其他瀏覽器 */
3 background:blue; /* IE6 */
4 }
5 *+html #bgcolor {
6 background:green !important; /* IE7 */
7 }
|