IE678如何兼容css3圆角属性

面试中经常会遇到的问题，索性写个总结，方便以后参考：

没有最好的方法，只有更好的方法，毕竟：代码改变世界！

第一种：简单粗暴PNG圆角图片，即css调用一张圆角图，覆盖到图上

　　缺点：适用范围受限，不易优化

第二种：用js强制修边，js调用图片遮盖边角（如有需要请自行百度）

第三种：纯CSS绘制，实例如下：

　　原贴出处：http://www.zhangxinxu.com/wordpress/2016/07/ie7-ie8-css-circle-border-radius/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE7/IE8浏览器纯CSS实现圆角效果实例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 150px;
            height: 150px;
            position: relative;
            background: orange;
            /* 值显示左上角那个圆点 */
            overflow: hidden;
        }
        .radius{
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border:149px dotted;

            /* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */
            margin: 0 0 1px 1px;
           /* vw 如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100*/
            border-width: 0vw;
            /*相对于视口的宽度。视口被均分为100单位的vw*/
            margin: 0vw;
            background-color: pink;
        }
        .text {
            padding-top: 20px;
            position: relative;
            color: #000;
            text-align: center;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <i class="radius"></i>
        <p class="text">绘制圆角效果</p>
    </div>
</body>
</html>

第四种：引入PIE，点击此处进入下载页面

参考链接：http://blog.csdn.net/m0_37400258/article/details/55520351

下载PIE-2.0版本，里面会有一个PIE.htc,还有一个PIE_IE678.js(主要用的这两个文件)，统一放在同一目录文件夹下，实例代码如下：

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

※注：以上代码均由本人亲测，如有纰漏，不吝指出。

第五种：拖字诀，说服领导放弃兼容~

个别注意点：

1、html,htc,js文件均放在同一文件夹中，如有需要自行调整位置

2、iecss3的方法未实现该属性兼容，或许使用方式不对，有兴趣的可以自行研究下，有了结果欢迎留言链接。

3、没有最好的方法，只有更好的方法~END

 

posted @ 2017-12-14 16:35  渡劫的咸鱼哥  阅读(163)  评论(0)  编辑  收藏  举报