ie8如何兼容css3的圆角属性

来源：互联网发布：ubuntu系统安装分区编辑：程序博客网时间：2024/06/09 19:19

刚入门，要兼容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文件起冲突，导致页面报错，出现对象为空，解决办法，卸载电脑管家)。

0 0