讓IE瀏覽器支持CSS3圓角屬性的方法

如果要想在IE瀏覽器中實現圓角的效果,我們一般都會採用圓角圖片的方式。用圖片的話,基本就跟瀏覽器沒有多大關係了,因爲任何瀏覽器都支持這種方式。今天我們主要是講解如果用CSS3樣式表來實現圓角效果,值得注意的是,IE6/7/8這三個IE瀏覽器版本都不支持CSS3的解析,只有還不太主流的IE9支持CSS3和HTML5的標準。讓IE支持CSS3的解析方法有很多種,(讓IE瀏覽器支持HTML5標準的方法)下面介紹一種實用的讓IE支持CSS3解析的方法——IE利用VML矢量可標記語言作爲畫筆繪出圓角:

1、下載一個壓縮包,裏面有一個微軟的腳本文件(11KB)和一個用來測試服務器是否有正確的Content-Type的HTML文件:iecss3.rar;.htc文件是IE內核支持Web行爲後用來描述此類行爲的腳本文件。它們定義了一套方法和屬性,程序員幾乎可以把這些方法和屬性應用到HTML頁面上的任何元素上去。Web 行爲是非常偉大的因爲它們允許程序員把自定義的功能“連接”到現有的元素和控件,而不是必須讓用戶下載二進制文件(例如ActiveX 控件)來完成這個功能。

解壓後,打開test.html,如果顯示效果是圓角,則可以繼續。

使用演示:

.main{
border: 2px solid #C0C0C0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:2;
behavior: url(此處爲ie-css3.htc文件的絕對路徑);
}

Webkit內核的瀏覽器支持“-webkit-border-radius: 10px;”屬性(10px是圓角半徑),可以直接解析出圓角;Firefox瀏覽器支持“-moz-border-radius: 10px;”屬性,也是可以直接解析出圓角;IE系瀏覽器則需要加上“border-radius: 15px;”的屬性。

注意

1、behavior的url裏一定要填寫ie-css3.htc的絕對路徑,因爲 IE瀏覽器找該文件是相對當前html文件路徑來找的,所以對於Wordpress等動態程序生成的頁面一定要填寫絕對路徑。

2、一定要有定位屬性:position:relative;

3、因爲在IE瀏覽器下這些CSS3效果的實現是要藉助於VML,由VML繪製圓角或是投影效果,所以還需要一個z-index屬性。z-index屬性最好設置得比較大,如2。

4、如果在IE瀏覽器下某些模塊無法用此渲染,可以試着絕對定位相應的層,即加上“ width: 400px; height:400px;”屬性。

5、radius屬性的10px是圓角半徑,還可以給兩個值如“border-radius: 10px 5px;”,這樣則左上角與右下角半徑爲10px,右上角與左下角半徑爲5px。也可以賦4個值,爲“上  右  下  左”。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章