PIE.js使IE6,7,8支持部分常用CSS3渲染_HTML5中文网 - 我们以促进HTML5在中国的普及而努力--HTML5中文学习网

官网

http://css3pie.com

名称：PIE.js

此JS可使IE6,7,8支持CSS3的部分渲染

例如：
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

使用办法：

此API使用非常简单，只需要在页面头部引用

JavaScript Code复制内容到剪贴板

<!--[if lt IE 9]>
<script type="text/javascript" src="path/to/PIE.js"> </script>
<![endif]-->

以下是jQuery的调用办法，把你需要渲染的样式名写上即可

JavaScript Code复制内容到剪贴板

$(function() {
$('.rounded').each(function() {
PIE.attach(this);
});
});

同样，如果要删除某个样式的CSS3效果

截图：

演示：（请使用IE6,7,8查看）

http://www.html5china.com/html5demo/Pie/

代码：

XML/HTML Code复制内容到剪贴板

<!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>让IE678支持CSS3渲染 - HTML5中文网</title>
<script type="text/javascript" src="PIE.js"></script>
<style>
.tabBox .tabs {
margin: 0;
padding: 0 10px;
overflow: hidden;
margin-bottom: -1px;
height: 2.25em;
}
.tabBox .tabs li {
float: left;
list-style: none;
margin: 0;
padding: .25em .25em 0;
height: 2em;
overflow: hidden;
position: relative;
z-index: 1;
border-bottom: 1px solid #FFF;
}
.tabBox .tabs li.selected {
z-index: 3;
}
.tabBox .tabs a {
float: left;
height: 2em;
line-height: 2em;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
background: #EEE;
border: 1px solid #CCC;
border-bottom: 0;
padding: 0 10px;
color: #000;
text-decoration: none;
behavior: url(PIE.htc);
}
.tabBox .tabs .selected a {
background: #FFF;
-webkit-box-shadow: #CCC 0 0 .25em;
-moz-box-shadow: #CCC 0 0 .25em;
box-shadow: #CCC 0 0 .25em;
}
.tabBox .tabs a:hover {
background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
background: -moz-linear-gradient(#EEF, #FFF 70%);
background: linear-gradient(#EEF, #FFF 70%);
-pie-background: linear-gradient(#EEF, #FFF 70%);
}
.tabBox .content {
clear: left;
position: relative;
z-index: 2;
padding: 2em 1em;
border: 1px solid #CCC;
background: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #CCC 0 0 .25em;
-moz-box-shadow: #CCC 0 0 .25em;
box-shadow: #CCC 0 0 .25em;
behavior: url(PIE.htc);
}
</style>
</head>
<body>
<div class="tabBox">
<ul class="tabs">
<li class="selected"><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
</ul>
<div class="content">
<p><a href="http://www.html5china.com">请使用IE6,7,8浏览</a></p>
</div>
</div>
</body>
</html>