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

【htc法：IE-CSS3】CSS3支持IE6、IE7、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浏览器（IE6、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、层相互重叠。

有两个简单的解决方法：

1. 设置更大一些的z-index值
2. 利用绝对定位position:relative 或 position: absolute

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

可能有这几个原因：

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

3、IE提示脚本错误

常出现在IE6浏览器中，原因是和你添加的别的js冲突了。解决方法：

1. 调整你的js使之兼容。
2. 放弃这个方法，采用背景图片或者IE6-IE8不用这个特效（IE9、火狐和谷歌等才用这个特效）。

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

来源：oschina

链接：https://my.oschina.net/u/858398/blog/100525