ie8如何兼容css3的圆角属性

最新推荐文章于 2021-06-08 13:29:05 发布

dandantang_enjoy

最新推荐文章于 2021-06-08 13:29:05 发布

阅读量1w

点赞数 1

分类专栏： css 文章标签： ie 8

本文链接：https://blog.csdn.net/m0_37400258/article/details/55520351

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

dandantang_enjoy

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ie8如何兼容css3的圆角属性

刚入门，要兼容ie8，实现css3的一些效果，百度一番，得到的答案是用pie.css ；首先pie.css有2个版本，使用方法也不一样，官网http://css3pie.com/的documentation对2个版本的js写法有具体介绍，我用的版本1，要实现ie8圆角属性的兼容；下载好版本一，里面会有一个PIE.htc,还有一个PIE.js(主要用这2个文件)，我放到pie文件下的，然后代码
复制链接

扫一扫