IE兼容css3圓角的htc解決方法

IE兼容css教程3圓角的htc解決方法 
如今css3的border-radius屬性能夠很方便的實現圓角功能，對網站前臺人員無疑是一件喜事，但悲劇的是IE6/7/8並不支持，讓咱們棄新技術不用，是不可能的，所以找到了一種解決的辦法--- IE利用VML矢量可標記語言做爲畫筆繪出圓角：

下載一個壓縮包ie-css3.htc，裏面有一個微軟的腳本文件（11KB）和一個用來測試服務器是否有正確的Content-Type的 HTML文件，.htc 文件是IE內核支持Web行爲後用來描述此類行爲的腳本文件。它們定義了一套方法和屬性，程序員幾乎能夠把這些方法和屬性應用到HTML頁面上的任何元素 上去。Web 行爲是很是偉大的由於它們容許程序員把自定義的功能「鏈接」到現有的元素和控件，而不是必須讓用戶下載二進制文件（例如ActiveX 控件）來完成這個功能。

下載地址：ie-css3.htc

 

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

Webkit內核的瀏覽器支持「-webkit-border-radius: 10px;」屬性（10px是圓角半徑），能夠直接解析出圓角；Firefox瀏覽器支持「-moz-border-radius: 10px;」屬性，也是能夠直接解析出圓角；IE系瀏覽器則須要加上「border-radius: 15px;」的屬性。注意：

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

二、必定要有定位屬性：position:relative;

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

四、若是在IE瀏覽器下某些模塊沒法用此渲染，能夠試着絕對定位相應的層，即加上「 width: 400px; height:400px;」屬性。

五、radius屬性的10px是圓角半徑，還能夠給兩個值如「border-radius: 10px 5px;」，這樣則左上角與右下角半徑爲10px，右上角與左下角半徑爲5px。也能夠賦4個值，爲「上  右  下  左」。