寫完第七課,因為時間問題沒有繼續寫第八課有關浏覽器兼容方面的文章,以為大家可以自己掌握這方面的知識,不過發現有很多同學找了很多資料,很多文章去研究,費時費力的,效果也不好,今天是星期六,我呢就再給大家補寫這篇教程,帶領大家用最短的時間掌握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;
注意:附加有“*”的語句一定要在沒有附加“*”的語句的下面,順序一定不能錯!你想想就知道!好了,這節課很容易,相信你肯定很容易就理解了,後面的就是自己實踐喽~加油各位!
===============================================================
為了幫助大家更好的提高,到這個帖子裡***提建議,拿金幣!*** ,你希望在後面的教程裡加上哪方面的內容,你對現在教程有什麼建議,說出來,我會給大家寫一本電子書,人手一本,更好的幫助大家提高!快來吧,別等了~~~就等你的建議了~