說到瀏覽器兼容性問題,就必須說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;
}
由于IE8以下的版本(不包含IE8)和360可以識別附加有*的CSS屬性語句,FF則不能識別,所以我們就可以用來來解決一些頁面,在IE上顯示的效果與FF上的效果不一樣的情況。
新聞熱點
疑難解答