H5：border-radius移动端的兼容问题

最新推荐文章于 2023-02-23 15:29:56 发布

KWMax

最新推荐文章于 2023-02-23 15:29:56 发布

阅读量1k

点赞数

分类专栏： H5开发文章标签： css border-radius

本文链接：https://blog.csdn.net/yaojie5519/article/details/107728046

版权

H5开发专栏收录该内容

24 篇文章 3 订阅

订阅专栏

问题场景

通过以下方式实现一个圆形边框的选项值

.option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 36px;
    color: #888888;
    border: 2px solid #888888;
}

在chrome和其他浏览器上一直显示正常。在个别移动端机子上，出现圆圈不圆和文字不居中的情况。

原因

移动端有些机子对border-radius百分比支持属性存在兼容问题。

解决方案

不使用百分比，使用固定值，同时加一下前缀 -webkit-、-moz-

.option {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    text-align: center;
    line-height: 40px;
    font-size: 36px;
    color: #888888;
    border: 2px solid #888888;
}

亲测有效