IE8圆角问题

最新推荐文章于 2023-03-03 21:51:37 发布

llhswwha

最新推荐文章于 2023-03-03 21:51:37 发布

阅读量4k

点赞数 3

分类专栏： Web CSS

本文链接：https://blog.csdn.net/llhswwha/article/details/80758514

版权

Web 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

IE8不支持border-radius，无法实现圆角的效果。

有个PIE插件，似乎能够达到让IE8支持圆角效果的。

官网似乎是 http://css3pie.com/，但是官网上没效果！别说是IE8了，9、10、11都没有圆角啊。火狐和google浏览器也都没有，奇怪了！

继续查找资料：

URL1: https://www.zhangxinxu.com/wordpress/2010/07/pie%E4%BD%BFie%E6%94%AF%E6%8C%81css3%E5%9C%86%E8%A7%92%E7%9B%92%E9%98%B4%E5%BD%B1%E4%B8%8E%E6%B8%90%E5%8F%98%E6%B8%B2%E6%9F%93/

这个是比较全的介绍了，后面还有一些注意事项。

URL2:https://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html

这个网页上的和css3pie主页的一样，但是确实是有圆角效果了。

URL3:https://download.csdn.net/download/xiaoyaoyixian/7563175

这是csdn上的demo文件，也有效果的。

另外最早找到的资料

URL4:http://www.ijquery.cn/?p=675

里面说PIE.attach(this);没必要，后面测试看看。

项目的需求是

在IE8下变成了

修改CSDN下载的文件中的例子，只留下需要的部分

<!DOCTYPE html>
<!--如果没有这一句，最底下的三角形会显示不出来-->
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>CSS3 PIE 圆角演示</title>
    <style type='text/css'>
        body {
            background-color: blue;
        }
         .radiusContainer {
             height: 100px;
             width: 100px;
             background: #999;
             margin: 10px;
         }
        .radiusContainer img {
            height: 100px;
            width: 100px;
        }
        .pieRadius1 {
            behavior: url(PIE.htc);
            position: relative; /*如果没有这个属性，显示不出来*/
            border-radius: 10px;
        }
        .pieRadius2 {
            behavior: url(PIE.htc);
            position: relative; /*如果没有这个属性，显示不出来*/
            border-radius: 1em;
        }
        .pieRadius3 {
            behavior: url(PIE.htc);
            position: relative; /*如果没有这个属性，显示不出来*/
            border-radius: 50%;
        }
    </style>
    <!--[if lt IE 9]>
      <script type="text/javascript" src="PIE_IE678.js"></script>
    <![endif]-->
    <!--[if IE 9]>
      <script type="text/javascript" src="PIE_IE9.js"></script>
    <![endif]-->
</head>

<body>
    <div id="page">
        <div id="tests">
            <span class="radiusContainer pieRadius1"><img src="profile.png" class="pieRadius1"/></span>
            <span class="radiusContainer pieRadius2"><img src="profile.png" class="pieRadius2"/></span>
            <span class="radiusContainer pieRadius3"><img src="profile.png" class="pieRadius3"/></span>
        </div>
    </div>

</body>
</html>

实现效果：

最后把相关代码拿到项目页面中，实现UI设计的效果。

/*登录用户图片圈圈*/
#imgProfile {
    margin: 10px;
    position: relative;
    border-radius: 50%;
    behavior: url(PIE/PIE.htc);/*这个路径是相对于html页面的，不是css文件的*/
}
/*消息right圈圈*/
#amounts {
    width: 30px;
    height: 16px;
    position: absolute;
    top: 51px;
    left: 75px;
    text-align: center;
    line-height: 16px;
    color: #8695b2;
    background-color: #FF548C;
    color: white;
    border-radius: 30px;
    behavior: url(PIE/PIE.htc);/*这个路径是相对于html页面的，不是css文件的*/
}

behavior的url必须是相对于html页面的路径，就因为这个没弄对，我们的前端搞了半天没弄出来。

URL1后面的注意点中有提到这个路径，URL4中的例子的CSS不能用。

llhswwha

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
IE8圆角问题

IE8不支持border-radius，无法实现圆角的效果。有个PIE插件，似乎能够达到让IE8支持圆角效果的。官网似乎是 http://css3pie.com/，但是官网上的效果，别说是IE8了，9、10、11都没有圆角啊。火狐和google浏览器也都没有，奇怪了！继续查找资料：https://www.zhangxinxu.com/wordpress/2010/07/pie%E4%BD%BFie...
复制链接

扫一扫

专栏目录