CSS實例教程:CSS Hack

2024-07-11 09:03:13

字體：大中小

來源：轉載

供稿：網友

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

寫完第七課，因為時間問題沒有繼續寫第八課有關瀏覽器兼容方面的文章，以為大家可以自己掌握這方面的知識，不過發現有很多同學找了很多資料，很多文章去研究，費時費力的，效果也不好，今天是星期六，我呢就再給大家補寫這篇教程，帶領大家用最短的時間掌握CSS Hack！

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

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

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

!important

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

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

*

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

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

好了，這節課很容易，相信你肯定很容易就理解了，后面的就是自己實踐嘍~加油各位！
===============================================================
為了幫助大家更好的提高，到這個帖子里***提建議，拿金幣！*** ，你希望在后面的教程里加上哪方面的內容，你對現在教程有什么建議，說出來，我會給大家寫一本電子書，人手一本，更好的幫助大家提高！快來吧，別等了~~~就等你的建議了~

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

下一篇：CSS實例教程:用position來布局頁面