您的位置：首页 > Web前端 > CSS

ie8如何兼容css3的圆角属性

2017-02-17 19:30 531 查看
刚入门，要兼容ie8，实现css3的一些效果，百度一番，得到的答案是用pie.css ；

首先pie.css有2个版本，使用方法也不一样，官网http://css3pie.com/的documentation对2个版本的js写法有具体介绍，我用的版本2，要实现ie8圆角属性的兼容；

下载好版本2，里面会有一个PIE.htc,还有一个PIE_IE678.js(主要用这2个文件)，我放到pie文件下的，然后代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.big{position:relative;z-index:0;}
.sm{width:100px;height:100px;background-color:blue;border:1px solid #000;
-webkit-border-radius:50%;
　　  -moz-border-radius:50%;
　　  -ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
-webkit-box-shadow:#f60 0px 2px 3px;
-moz-box-shadow:#f60 0px 2px 3px;
box-shadow:#f60 0px 2px 3px;
　　  behavior: url(pie/PIE.htc);
}
</style>
<script src="pie/jquery-1.11.3.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="pie/PIE_IE678.js"></script>
<script type="text/javascript">
$(function() {
if (window.PIE) {
$('.sm').each(function() {
PIE.attach(this);
});
}
});
</script>
<![endif]-->
</head>
<body>
<div class=big>
<div class="sm"></div>
</div>

</body>
</html>


其中有几点说明

1是：PIE.htc URL路径是相对于当前HTML文件，不是CSS文件.

2是：需要在服务器或者本地服务器上运行才有效果

我的疑惑是

1：js代码里面的.rounded是什么意思，我一直把它想成一个可替代元素，但是不知道怎么用，所以直接原版copy过来了。（见国外网站，.rounded使用的是你要添加属性的元素名字。）

2：我百度，以及官方的给的英文说明都是说的引入pie.js算是第二种方式了。第一种方式使用behaviour +url（pie.htc）。但是我在用的时候是既引入了pie.js也用了behaviour +url(pie.htc),结合起来才出的效果（补充:用版本2，引入pie/PIE_IE678.js才会生效，之前用的PIE.js未生效，与版本有关。）

3.还有很多注意的，需自行搜索了(补充一个遇到的问题，电脑安装了电脑管家，在ie下会与js文件起冲突，导致页面报错，出现对象为空，解决办法，卸载电脑管家)。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ie 8
相关文章推荐
新的分享
章节导航