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制作完美圈子的唯一方法就是使用"魔术数字"和浏览器检测.它是如此基本,我无法想象有什么问题.有什么想法吗？

谢谢!

Answer 1

免责声明:我这里没有iPhone,也没有任何可以运行Safari的设备,因此我无法确定是否可行.

但是,我注意到在我的电脑上,圈子也不圆.并且一些实验发现,当字体大小不是16px时,形状是关闭的.

我用身体的字体大小更新了小提琴,所以你可以自己看看.在这里.

原来问题是按钮的填充.显然,它有一个默认的填充像素,水平和垂直不一样,所以如果你只是添加

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,所以这可能不是你的解决方案.如果有效,请告诉我!