Question

我使用web.xml，ul和li来获得旋转木马的基本导航。你可以看到我在这里谈论的基本版本：

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

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

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

我已经调整了所有我能想到的东西，但我能让iOS Safari制作完美圈子的唯一方法就是使用＆＃34;魔术数字＆＃34;和浏览器检测。它是如此基本，我无法想象出错了什么。那里有什么想法吗？

谢谢！

Answer 1

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

然而，我注意到在我的电脑上，圆圈也不圆。并且一些实验发现，当字体大小不是16px时，形状已经关闭。

我用身体的字体大小更新了小提琴，所以你可以自己看看。 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按钮不完美的圆圈

1 个答案: