iOS Safari 按钮不是完美的圆形

Question

我有一个轮播的基本导航，使用 ul、li 和 buttons。你可以在这里看到我所说的基本版本：

http://jsfiddle.net/bootsified/2he1px5c/

在除 iOS Safari 之外的所有浏览器中，按钮显示为完美的圆圈。但是，在 iOS Safari 中，它们显示为椭圆形。以下是我正在谈论的内容的屏幕截图：

http://boots.media/assets/img/dots-screenshot.png

我已经调整了所有我能想到的，但我能让 iOS Safari 做出完美圆圈的唯一方法是使用 "magic numbers" 和浏览器检测。它是如此基本，我无法想象哪里出了问题。有什么想法吗？

谢谢！

Answer 1

免责声明：我这里没有 iPhone，也没有任何可以运行 Safari 的设备，所以我不能肯定地告诉你这是否可行。

但是，我注意到在我的电脑上，圆圈也不是圆的。一点点实验发现，当字体大小不是 16px 时，形状不对。

我用正文的字体大小更新了 fiddle，所以你可以自己看看。 Here.

原来是按钮的填充问题。显然，它有一个以像素为单位的默认填充，它在水平和垂直方向上是不一样的，所以如果你只是添加

padding:0;

（或与水平和垂直相同的任何值）到 CSS，无论字体大小如何，按钮始终为圆形。

* {
  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，因此这可能不是适合您的解决方案。让我知道它是否有效！

iOS Safari 按钮不是完美的圆形

iOS Safari Buttons Not Perfect Circles

css

mobile-safari