ie678兼容css3

来源：互联网发布：arc map空间数据编辑编辑：程序博客网时间：2024/06/04 13:00

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

•需要注意的还是上面所说的z-index、绝对路径、缩写形式等问题

demo下载：pie-htc.rar

效果图如下：

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

转载请注明地址: http://www.phpddt.com/dhtml/922.html 尊重他人劳动成果就是尊重自己!

0 0