天天看點

幾個常用的CSS3樣式代碼以及不相容的解決辦法

Firefox,Chrome Google,Safari等浏覽器的顯示效果如圖0-0:

幾個常用的CSS3樣式代碼以及不相容的解決辦法

                     圖0-0

但是IE這個異類不支援CSS3的這個屬性,在IE9下的顯示效果如圖0-1:

幾個常用的CSS3樣式代碼以及不相容的解決辦法

                     圖0-1

但是不能放任它不管,還是找辦法解決這個相容性問題。

解決方案:在CSS檔案中通過behavior屬性——這個屬性隻能被IE識别,引入一個htc檔案, ie-css3.htc

這個是由Remiz Rahnas使用 VML 編寫了一個 HTC 檔案,為 IE 浏覽器提供圓角效果的支援。

截兩幅圖看看效果,一幅來自IE6,一幅來自IE9:

幾個常用的CSS3樣式代碼以及不相容的解決辦法
幾個常用的CSS3樣式代碼以及不相容的解決辦法
注意:首先,在 Server 端需要引入一個 HTC 檔案,經過 gzip 壓縮後對 server 端和 client 端性能應該不會有太大的影響;其次,它會使你的 CSS 驗證不合法;另外,這個腳本在 IE8 上有一些問題,它會使 z-index 值變成負數。是以使用時還需要小心.

Chrome,Firefox,IE9下的效果顯示:

幾個常用的CSS3樣式代碼以及不相容的解決辦法

接下來要做的事情,想必讀者朋友都知道了,相容IE6-8。首先想到的IE的濾鏡。來看看效果吧。

測試之後的效果,分别是IE5.5-IE8:

幾個常用的CSS3樣式代碼以及不相容的解決辦法

雖然差強人意,但湊合着用。如果有朋友知道除此之外的方法,能否告知一聲,共同進步嘛!^_^

相容IE 6,7,8。效果(來自IE6):

幾個常用的CSS3樣式代碼以及不相容的解決辦法
幾個常用的CSS3樣式代碼以及不相容的解決辦法

以上代碼已經實作了對以上浏覽器及其版本的支援,但是IE6,7,8呢?俗話說,兵來将擋,水來土掩,山人自有妙計,隻不過這妙計是借來的。