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://bzwzjz.com/article/pccocc.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 重庆电商网站建设 高端网站设计 成都网站建设 成都做网站建设公司 成都网站建设 成都网站建设 成都h5网站建设 手机网站建设套餐 重庆企业网站建设 企业网站建设 网站建设 商城网站建设 网站建设 成都网站建设推广 成都网站建设公司 外贸营销网站建设 网站制作公司 营销型网站建设 企业网站建设公司 网站制作 成都商城网站建设 成都网站制作