是否可以覆盖 iPad 上 Safari 中按钮的最小宽度?

发布于 2024-09-24 11:12:51 字数 439 浏览 3 评论 0原文

我有以下 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 中运行此代码时,按钮更宽。按钮有最小宽度吗?这个宽度可以被覆盖吗?

I have the following HTML-page:

<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>

When I run this code in any desktop browser, it works perfectly; the buttons are 14 pixels wide. When I run this code in Safari on an iPad, the buttons are wider. Is there some minimum width for buttons? Can this width be overridden?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

傲世九天 2024-10-01 11:12:51

刚刚遇到了同样的问题。我做了小型试验/研究,结果表明字体大小会影响水平填充(左侧和右侧)。
因此,要解决此问题 - 明确声明 padding: 0 或您需要的任何其他填充。
iOS 11.2、iOS 10.3.3

Just now encountered the same problem. I did small trial/research which showed that font-size affects horizontal paddings (both left and right).
So, to fix this - explicitly state padding: 0 or any other padding you require.
iOS 11.2, iOS 10.3.3

愁以何悠 2024-10-01 11:12:51

回答我自己的问题:显然,

Answering my own question: apparently, the minimum width of <button> depends on the font size. So by setting the font size to 0, I can make the buttons smaller. I do realize that small buttons are not good when used on a touch-driven device like the iPad, so I'll probably create an alternate, more touch-friendly version of the UI.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文