iOS Safari按钮不是完美的圆形

Question

iOS Safari按钮不是完美的圆形

5

我有一个基本的导航轮播，使用 ul, li 和 buttons。你可以在这里看到一个基本版本： http://jsfiddle.net/bootsified/2he1px5c/ 在除了iOS Safari以外的所有浏览器中，按钮都显示为完美的圆形。但是，在iOS Safari中，它们显示为椭圆形。以下是我所说的屏幕截图： http://boots.media/assets/img/dots-screenshot.png 我已经尝试过一切，但唯一能让iOS Safari呈现完美圆形的方法是使用“魔法数字”和浏览器检测。这么基本的问题，我无法想象错在哪里。有什么建议吗？

谢谢！

- Boots

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr Lister · Accepted Answer

免责声明：我这里没有iPhone，事实上也没有任何可以运行Safari的设备，所以我无法确定这是否会起作用。

不过，我注意到在我的电脑上，这些圆形也并不是完美的。经过一些尝试，我发现当字体大小不是16像素时，形状会偏离。

我已经为body添加了一个字体大小，你可以自己查看更新后的演示。这里。

结果问题出在按钮的填充(padding)上。显然，它有一个默认的像素填充值，水平和垂直方向上并不相同，因此如果你只是添加：

padding:0;

在CSS中添加属性border-radius: 50%（或任何水平和垂直方向相同的值），则按钮始终为圆形，无论字体大小如何。

* {
  box-sizing: border-box;
}
ul {
  list-style: none;
  text-align: center;
}
li {
  display: inline-block;
  height: 1em;
  margin: 0 0.5em;
  width: 1em;
}
button {
  padding: 0;
  background-color: #CCC;
  border: 2px solid #000;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  text-indent: -999em;
  overflow: hidden;
  text-align: left;
  direction: ltr;
  display: block;
  cursor: pointer;
  -webkit-appearance: none;
}

<ul>
  <li><button type="button" role="none">1</button></li>
  <li><button type="button" role="none">2</button></li>
  <li><button type="button" role="none">3</button></li>
  <li><button type="button" role="none">4</button></li>
</ul>

但是，由于我不能在这里测试Safari，所以这可能不适合您。如果有效，请告诉我！