你肯定想不到这么一个每天在用的样式竟然出现了一个让整组人来解决的问题

背景：要写一个圆角的装饰

问题：这个用border-radius写的圆角，在部分手机上出现了不是正圆，是椭圆的情况，而且是有的圆，有的不圆。 如图：

问题排查：

这是初始代码

  width: .16rem;
  height: .16rem;
  border-radius: 50%;

一、怀疑50%的问题，随改成了border-radius: .16rem，没有效果

二、然后怀疑是rem计算的问题，改成了border-radius: 16px,还是没效果

三、既然怀疑是rem计算的问题，就查看了下计算的根值，发现某些手机上不是整数

然后又查看了下浏览器解析出来border-radius的值解析成了px，也不是个整数，所以推测出由于精度的问题导致画不圆。

最后方案改成了

width: 8px;
height: 8px;
border-radius: 16px;

终于圆了

就是这么一个小小的样式问题，还真是费了一番功夫，特来记录一下。