讓IE瀏覽器支援CSS3圓角的方法

標籤：style   color   使用   strong   os   檔案   

如果要想在IE瀏覽器中實現圓角的效果，我們一般都會採用圓角圖片的方式。用圖片的話，基本就跟瀏覽器沒有多大關係了，因為任何瀏覽器都支援這種方式。今天我們主要是講解如果用CSS3樣式表來實現圓角效果，值得注意的是，IE6/7/8這三個IE瀏覽器版本都不支援CSS3的解析，只有還不太主流的IE9支援CSS3和HTML5的標準。讓IE支援CSS3的解析方法有很多種，（HTML5 Shiv – 讓該死的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個值，為“上  右  下  左”。