森森网络

解决CSS圆角样式在360浏览器兼容模式下无效的问题

 

来源:森森网络 管理员     阅读:3052      2016-7-29 20:46

 

 

今天我们来讲一讲关于CSS圆角样式border-radius在360浏览器兼容模式下无效的问题。

首先我们用CSS来画一个蓝色背景的圆,如下:
CSS样式
.yuan{
width:200px;
height:200px;
background:#39C;
margin:auto;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

效果图
在360浏览器极速模式下观察,显示正常


切换到360浏览器兼容模式下观察,圆形效果不起作用了,显示的是一个正方形。


如何解决?

在html文件中添加两个标签即可解决上述问题。



X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。
通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。
以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活ChromeFrame

最后结果!

在兼容模式下显示正常。


更多原创内容,请关注“森森网络”微信公众号!

 

|   关于我们   |   联系我们   |   网站地图   |
CopyRight © 2013-2016 安庆市森森网络科技有限公司版权所有    皖ICP备15018643号-1