您现在的位置是:网站首页> 编程资料编程资料

让IE 6,7,8模拟部分的css3属性浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)

2021-09-07 889人已围观

简介 在ie下模拟css3中的box-shadow(阴影)可以使用ie的Shadow(阴影)滤镜,该滤镜必须配合background属性一起使用,否则该滤镜失效,感兴趣的朋友可以参考下哈

在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属性 */
}

完整代码如下

复制代码
代码如下:





让IE支持css3








相关内容

-六神源码网