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.
精彩评论