是否可以覆盖 iPad 上 Safari 中按钮的最小宽度?
我有以下 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
刚刚遇到了同样的问题。我做了小型试验/研究,结果表明字体大小会影响水平填充(左侧和右侧)。
因此,要解决此问题 - 明确声明
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
回答我自己的问题:显然,
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.