Question

我有以下HTML页面：

<html>
<head><style>
  * { margin: 0; padding: 0; border: none; }
  button { width: 14px; background: #F00; }
</style></head>
<body>
  <button></button>
  <button></button>
  <button></button>
</body>
</html>

当我在任何桌面浏览器中运行此代码时，它运行良好;按钮宽14像素。当我在iPad上的Safari中运行此代码时，按钮更宽。按钮有一些最小宽度吗？这个宽度可以被覆盖吗？

Answer 1

回答我自己的问题：显然，＆lt; button＆gt;的最小宽度取决于字体大小。因此，通过将字体大小设置为0，我可以使按钮更小。我确实意识到在iPad等触控设备上使用小按钮并不好，所以我可能会创建一个替代的，更适合触控的UI版本。

Answer 2

刚刚遇到同样的问题。我进行了小型试验/研究，结果显示字体大小会影响水平填充（左右两侧）。因此，要解决此问题 - 明确说明padding: 0或您需要的任何其他填充。 iOS 11.2，iOS 10.3.3

可以在iPad上覆盖Safari中按钮的最小宽度吗？

2 个答案: