资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

border-radiusIE8兼容处理的示例分析

这篇文章将为大家详细讲解有关border-radius IE8兼容处理的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联专业为企业提供高坪网站建设、高坪做网站、高坪网站设计、高坪网站制作等企业网站建设、网页设计与制作、高坪企业网站模板建站服务,10多年高坪做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

根据canisue(http://caniuse.com/#search=border-radius),border-radius兼容性如下图所示:

border-radius IE8兼容处理的示例分析

测试代码:




    
        
        
        
        
            * {
                margin: 0;
                padding: 0;
            }
            
            #header {
                width: 400px;
                height: 400px;
                margin: 10px;
                border-radius: 10px;
                border: 1px solid red;
            }
        
    

    
        
        
    

IE8浏览器效果:

border-radius IE8兼容处理的示例分析

border-radius在IE8浏览器兼容方案:




    
        
        
        
        
            * {
                margin: 0;
                padding: 0;
            }
            
            #header {
                width: 400px;
                height: 400px;
                margin: 10px;
                border-radius: 10px;
                border: 1px solid red;
                /*关键属性设置 需要把路径设置好*/
                behavior: url(PIE.htc);
            }
        
    

    
        
        
    

IE8浏览器下效果:

border-radius IE8兼容处理的示例分析

PIE.HTC下载地址:http://css3pie.com/

PIE可以处理CSS3的一些属性,如:

border-radius IE8兼容处理的示例分析

IE8:兼容性主要是:

(1)不支持css3属性,使用PIE.js实现CSS3效果。

(2)media query

关于“border-radius IE8兼容处理的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前文章:border-radiusIE8兼容处理的示例分析
网站地址:http://cdkjz.cn/article/pccocc.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220