CSS實(shí)例教程:CSS Hack

2024-07-11 09:03:13

字體：大中小

供稿：網(wǎng)友

武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：CSS Hack是解決頁(yè)面瀏覽器不兼容的技巧方法，是一種方法喲，不要理解偏差。

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

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

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

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

!important

【例子】
#content{
height:960px !important;
height:900px;
}

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

*

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

由于IE6、IE7可以識(shí)別附加有*的CSS屬性語(yǔ)句，F(xiàn)F則不能識(shí)別，所以我們就可以用來(lái)來(lái)解決一些頁(yè)面，在IE上顯示的效果與FF上的效果不一樣的情況。
在上面的例子中
因?yàn)镕F不識(shí)別*，所以它只讀第一句“height:960px;”而忽略第二句，又因IE6、IE7識(shí)別*，所以它們先讀第一句，將高度定為960px，而后又讀第二句“*height:900px;”，將高度從960px修改為900px，所以我們?cè)贗E中看到的最終效果就是高度為900px;
注意：附加有“*”的語(yǔ)句一定要在沒(méi)有附加“*”的語(yǔ)句的下面，順序一定不能錯(cuò)！你想想就知道！

好了，這節(jié)課很容易，相信你肯定很容易就理解了，后面的就是自己實(shí)踐嘍~加油各位！
===============================================================
為了幫助大家更好的提高，到這個(gè)帖子里***提建議，拿金幣！*** ，你希望在后面的教程里加上哪方面的內(nèi)容，你對(duì)現(xiàn)在教程有什么建議，說(shuō)出來(lái)，我會(huì)給大家寫(xiě)一本電子書(shū)，人手一本，更好的幫助大家提高！快來(lái)吧，別等了~~~就等你的建議了~

上一篇：CSS實(shí)例教程:定位(position)布局頁(yè)面

下一篇：CSS實(shí)例教程:用position來(lái)布局頁(yè)面