CSS Hack 有關(guān)瀏覽器兼容方面

css學(xué)習(xí)網(wǎng) 發(fā)布時(shí)間：2010-01-09 10:30:25 作者：佚名

寫完第七課，因?yàn)闀r(shí)間問題沒有繼續(xù)寫第八課有關(guān)瀏覽器兼容方面的文章，以為大家可以自己掌握這方面的知識(shí)，不過發(fā)現(xiàn)有很多同學(xué)找了很多資料，很多文章去研究，費(fèi)時(shí)費(fèi)力的，效果也不好，今天是星期六，我呢就再給大家補(bǔ)寫這篇教程，帶領(lǐng)大家用最短的時(shí)間掌握CSS Hack！

說到瀏覽器兼容性問題，就必須說CSS Hack！提到Hack大家肯定會(huì)想到電腦黑客(hacker)、和病毒程序聯(lián)系到一塊，不過在CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法。說的更直白一些就是，你平時(shí)做個(gè)頁面，布局正確，CSS正確，可就是在不同的瀏覽器中顯示的效果不一樣，要么錯(cuò)位，要么多幾個(gè)像素，怎么都找不到原因，這時(shí)候我們就會(huì)用一些技巧方法來讓不同的瀏覽器顯示一樣的效果，這種方法我們就稱之為CSS Hack，記住嘍，CSS Hack是解決頁面瀏覽器不兼容的技巧方法，是一種方法喲，不要理解偏差。

不過這里需要說明一點(diǎn)，CSS Hack都屬于個(gè)人對(duì)CSS代碼的非官方修改，所以編寫的CSS代碼不會(huì)通過官方W3C的認(rèn)證，這個(gè)要知道！以后經(jīng)常會(huì)遇到這種情況，CSS寫的正確，通過W3C驗(yàn)證，但是不同瀏覽器顯示效果不一樣，用了CSS Hack，顯示的效果一樣了，卻又通不過W3C驗(yàn)證了，很是郁悶，不過不要鉆牛角尖就是了，W3C驗(yàn)證只不過是幫你檢查一下CSS代碼寫的有沒有語法錯(cuò)誤而已，通過驗(yàn)證只不過是說明你到目前寫的CSS代碼沒有語法錯(cuò)誤而已，不要太計(jì)較是否通過驗(yàn)證，也不要多想，如果通不過W3C驗(yàn)證，其他人會(huì)不會(huì)笑話我，這些想法都是沒有必要的，這說明我們的技能更強(qiáng)，因?yàn)槲覀冇玫搅薈SS Hack，再說了你的頁面是給網(wǎng)民看的，網(wǎng)民看的是界面好看不好看，內(nèi)容好不好，有沒有找到他要找的東西，他不理會(huì)你的頁面有沒有通過W3C驗(yàn)證，所以KwooJan在這里提醒大家，不要落入這個(gè)誤區(qū)喲~

好，我們開講！
這節(jié)課我主要講兩個(gè)最常用的CSS Hack，如果這兩個(gè)能明白，再學(xué)其他的Hack就容易了
（1）!important （2）*
!important
【例子】

復(fù)制代碼

代碼如下:

#content{
height:960px !important;
height:900px;
}

它所附加的生命擁有最高優(yōu)先級(jí)，但是由于IE6不能識(shí)別它,而對(duì)于IE7，F(xiàn)F均能識(shí)別，所以我們就可以用來來解決一些頁面，在IE6上顯示的效果與IE7、FF上的效果不一樣的情況。
在上面的例子中
IE7和FF遇到附加有!important的CSS屬性，就會(huì)只解析第一句“height:960px !important;”將高度定為960px，而后面的“height:900px;”將不解析，忽略它；
因?yàn)镮E6不認(rèn)識(shí)附加有!important的語句，所以會(huì)跳過第一句，忽略此句，直接解析第二句“height:900px;”將高度定為900px；
注意：附加有“!important”的語句一定要在沒有附加“!important”的語句的上面，順序一定不能錯(cuò)！

*

復(fù)制代碼

代碼如下:

#content{
height:960px;
*height:900px;
}

由于IE8以下的版本（不包含IE8）和360可以識(shí)別附加有*的CSS屬性語句，F(xiàn)F則不能識(shí)別，所以我們就可以用來來解決一些頁面，在IE上顯示的效果與FF上的效果不一樣的情況。
在上面的例子中
因?yàn)镕F不識(shí)別*，所以它只讀第一句“height:960px;”而忽略第二句，又因IE6、IE7識(shí)別*，所以它們先讀第一句，將高度定為960px，而后又讀第二句“*height:900px;”，將高度從960px修改為900px，所以我們?cè)贗E中看到的最終效果就是高度為900px;
注意：附加有“*”的語句一定要在沒有附加“*”的語句的下面，順序一定不能錯(cuò)！你想想就知道！
好了，這節(jié)課對(duì)于有點(diǎn)基礎(chǔ)的同學(xué)比較容易掌握，如果不能完全掌握，需要一個(gè)例子來講解一下，那就來看這篇文章“CSS Hack - 精講”，由KwooShung來給大家詳細(xì)講解