0
点赞
收藏
分享

微信扫一扫

设置圆角border-radius值为50%安卓各版本会变形


在H5页面通过css样式设置圆角,比如border-radius:50%,这样的方式,在不同的安卓浏览器里,其表现的形式也会有不一样,会出现大小不一致,有些扁圆,有些大,有些小,但是在IOS系统不会出现问题。

经排查,如果使用rem单位表示宽高,会有问题,如下:

.car-radius {
width: 0.2rem;
height: 0.2rem;
border-radius: 50%;
border: 1px solid black;
}

为了兼容不同分辨率的手机,我们会设置rem、em单位,很少直接设置px单位,但是安卓很多版本不一致,兼容不好。

解决办法:

.car-radius {
width: 11px;
height: 11px;
border-radius: 50%;
border: 1px solid black;
}

将rem单位改成px即可。

还有一种方式,就是把圆形图标改成图片的形式,也是能够兼容其他浏览器。


举报

相关推荐

0 条评论