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兼容处理的示例分析
本文URL：http://mswzjz.cn/article/pccocc.html

网站建设知识

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

其他资讯