让IE 6,7,8支持CSS3

最新推荐文章于 2020-06-03 09:30:11 发布

阿聪世家

最新推荐文章于 2020-06-03 09:30:11 发布

阅读量915

点赞数

分类专栏： html5/css3

本文链接：https://blog.csdn.net/congcong875/article/details/8793151

版权

html5/css3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在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>