Is it possible to override the minimum width of a button in Safari on iPad?_问答_开发者

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

开发者 https://www.devze.com 2023-01-17 02:21 出处：网络

I have the following HTML-page: <html> <head><style> * { margin: 0; padding: 0; border: none; }

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.