【htc法：IE-CSS3】CSS3支持IE6、IE7、IE8

摘要：IE-CSS3是提供一些CSS3标准新款式在即将到来的的Internet Explorer支持的脚本。

个人补充：项目期间，img标签在实现圆角的时候，htc文件不支持img标签的圆角，如果背景图倒是尅，利用超出隐藏还是不行，因为照片都是类似浮于背景上面，后来用z-index还是没法解决，所以个人建议，还是不要用这个好！ By HTML5自由者

IE-CSS3简介

IE-CSS3是一种作用于IE浏览器的客户脚本，可以为一些CSS3支持度不好的低版本的IE浏览器（IE6、IE7和IE8）提供支持一些新的CSS3样式和标准。

IE-CSS3的使用方法

工作原理

IE浏览器利用特定的矢量绘图语言的脚本（VML）重建本身不支持的CSS3这些属性（例如阴影和倒角等），说到底这是一种类似JS的脚本。

操作步骤

首选下载ie-css3.htc：官方下载
然后在CSS中添加样式:

view sourceprint

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值
利用绝对定位position:relative 或 position: absolute

2、布局可能有轻微的变形或浮动。

可能有这几个原因：
可是是你的标签没闭合，至少是包含IE-CSS3元素的标签没闭合
IE6和IE7 bug问题。CSS添加属性 zoom:1 或 position:relative 。或者将margin值用padding值达到同等效果。

3、IE提示脚本错误

常出现在IE6浏览器中，原因是和你添加的别的js冲突了。解决方法：
调整你的js使之兼容。
放弃这个方法，采用背景图片或者IE6-IE8不用这个特效（IE9、火狐和谷歌等才用这个特效）。