ie678兼容css3

最新推荐文章于 2017-02-27 13:42:00 发布

kangjiaaa

最新推荐文章于 2017-02-27 13:42:00 发布

阅读量848

点赞数

让IE支持CSS3的圆角、阴影等功能

发布时间: 2012-12-17浏览次数：1570分类: web前端

我的上篇文章css实现IE的阴影效果不尽人意，细心你会发现，IE滤镜的效果不是很好，其实国外的工程师们已经开发了很多让IE支持CSS3的工具，比如说：

1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js)

2. Aaron Gustafson的 eCSStender

3. Drew Diller的 DD_roundies

4. Remiz Rahnas的border-radius.htc

5. Nick Fetchak的 ie-css3.htc

6. Keith Clark的ie-css3.js

7. zoltandulac的cssSandpaper

8.使用CSS3 PIE,官方介绍：http://css3pie.com/
我特地测试了两个，效果还是可以的，案例如下：

一、使用ie-css3.htc实现让IE支持CSS3的圆角、阴影等功能


  
  <html>
<head><title>php点点通-www.phpddt.com 提供教程</title>
<style type="text/css">
.test {
	width:200px;
	height:200px;
	background-color:red;
	box-shadow:0px 0px 10px #CCCCCC;/* Opera 10.5+, IE6+ using IE-CSS3 */
    -moz-box-shadow:0px 0px 10px #CCCCCC;/* Firefox */
    -webkit-box-shadow:0px 0px 10px #CCCCCC;/* Safari and Chrome */
	position:relative;
	z-index:2;
  	behavior: url(ie-css3.htc);
}
</style>
</head>
<body>
	<div class="test">
		php点点通-www.phpddt.com 提供教程
	</div>
</body>
</html>

•当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。

•当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
•behavior: url(ie-css3.htc);的路径问题，要使用绝对路径。

•加上定位属性position:relative

•加上z-index属性z-index:2; 要比周围大，在IE浏览器下这些CSS 3效果的实现是要借助于VML，由VML绘制圆角或是投影效果，所以要设置

demo下载： iecss3.rar

二.使用PIE.htc实现CSS3的圆角阴影和渐变效果


  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css圆角阴影-来自www.phpddt.com</title>
<style>
#nav { 
	height:82px; 
	width:200px; 
	-moz-border-radius:4px; 
	-webkit-border-radius:4px; 
	border-radius:4px; 
	background:#FC3;
	-moz-box-shadow:0px 4px 5px #9C9C9C; 
	-webkit-box-shadow:0px 4px 5px #9C9C9C;
	box-shadow:0px 4px 5px #9C9C9C;
	position:relative;
	z-index:2;
	behavior: url(pie.htc);
}
</style>
</head>
<body>
<div id="nav">在本地测试不出效果，需上传到服务器-www.phpddt.com</div>
</body>
</html>