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

问题场景

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

.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;
}

亲测有效