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

其他资讯