开发者

Is it possible to override the minimum width of a button in Safari on iPad?

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 widt开发者_开发百科h for buttons? Can this width be overridden?


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜