让IE 6,7,8支持CSS3

来源：互联网发布：java工程打成war包编辑：程序博客网时间：2024/04/29 06:08

在ie下模拟css3中的box-shadow（阴影）可以使用ie的Shadow（阴影）滤镜
基本语法：filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);

注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。

.box-shadow{filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/background-color: #eee;-moz-box-shadow:2px 2px 5px #969696;/*firefox*/-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/box-shadow:2px 2px 5px #969696;/*opera或ie9*/}

让IE实现CSS3中的border-radius（圆角）

.box-radius {border-radius: 15px;behavior: url(border-radius.htc);}

大家知道IE 6,7,8不支持CSS3中新加属性，老外写了一个htc，可以让IE 6,7,8模拟部分的CSS3属性,包括：border-radius（圆角），box-shadow（阴影），text-shadow（文本阴影）：
注意：htc文件是要放在服务器上，放在本地测试是不行的！

.box {-moz-border-radius: 15px; /* Firefox */-webkit-border-radius: 15px; /* Safari and Chrome */border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */-moz-box-shadow: 10px 10px 20px #000; /* Firefox */-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */behavior: url(ie-css3.htc); /* 可以让IE 6,7,8模拟部分的CSS3属性 */}

完整代码如下：

<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>让IE支持css3</title><style>.box-shadow{width:200px; height:100px;margin-bottom:20px;filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/background-color: #eee;-moz-box-shadow:2px 2px 5px #969696;/*firefox*/-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/box-shadow:2px 2px 5px #969696;/*opera或ie9*/}.box-radius {width:200px; height:100px;margin-bottom:20px;background-color: #eee;border-radius: 15px;behavior: url(http://jt.875.cn/css3/border-radius.htc);}.box {width:200px; height:100px;background-color: #eee;margin-bottom:20px;-moz-border-radius: 15px; /* Firefox */-webkit-border-radius: 15px; /* Safari and Chrome */border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */-moz-box-shadow: 10px 10px 20px #000; /* Firefox */-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */behavior: url(http://jt.875.cn/css3/ie-css3.htc); /* 可以让IE 6,7,8模拟部分的CSS3属性 */}</style></head><body><div class="box-shadow"></div><div class="box-radius"></div><div class="box"></div></body></html>