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;”的屬性。注意:

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個值,為“上  右  下  左”。

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM