【htc法：IE-CSS3】CSS3支持IE六、IE七、IE8

【htc法：IE-CSS3】CSS3支持IE六、IE七、IE8

摘要：IE-CSS3是提供一些CSS3標準新款式在即將到來的的Internet Explorer支持的腳本。

PS:IE6及IE7使用ie-css3.htc 能支持 box-sizing box-shadow border-radius text-shadow

IE-CSS3簡介

IE-CSS3是一種做用於IE瀏覽器的客戶腳本，能夠爲一些CSS3支持度很差的低版本的IE瀏覽器（IE六、IE7和IE8）提供支持一些新的CSS3樣式和標準。

IE-CSS3的使用方法

工做原理

IE瀏覽器利用特定的矢量繪圖語言的腳本（VML）重建自己不支持的CSS3這些屬性（例如陰影和倒角等），說到底這是一種相似JS的腳本。

操做步驟

首選下載ie-css3.htc：官方下載

而後在CSS中添加樣式:

view source print

01. .box {

02. -moz-border-radius: 15px; /* Firefox */

03. -webkit-border-radius: 15px; /* Safari and Chrome */

04. border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

05. -moz-box-shadow: 10px 10px 20px #000; /* Firefox */

06. -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */

07. box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

08. behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the ‘box’ class */

09. }

支持的樣式和設定

支持樣式	支持的設定	不支持的設定
border-radius	Setting a radius for all four corners Element borders	Setting a radius for individual corners separately
box-shadow	Blur size Offset	Any color other than #000
text-shadow	Blur size Offset Color	The shadow looks a little bit different than it does in FF/Safari/Chrome, I’m not sure why

常見問題和解決方法

注意，behavior: url(ie-css3.htc);中url是文件的引用地址，你能夠用相對或決定路徑來引入。

一、層相互重疊。

有兩個簡單的解決方法：

1. 設置更大一些的z-index值
2. 利用絕對定位position:relative 或 position: absolute

二、佈局可能有輕微的變形或浮動。

可能有這幾個緣由：

1. 但是是你的標籤沒閉合，至少是包含IE-CSS3元素的標籤沒閉合
2. IE6和IE7 bug問題。CSS添加屬性 zoom:1 或 position:relative 。或者將margin值用padding值達到同等效果。

三、IE提示腳本錯誤

常出如今IE6瀏覽器中，緣由是和你添加的別的js衝突了。解決方法：

1. 調整你的js使之兼容。
2. 放棄這個方法，採用背景圖片或者IE6-IE8不用這個特效（IE九、火狐和谷歌等才用這個特效）。

原文出處：CSS3 support for Internet Explorer 6, 7, and 8