У меня есть следующая 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 пикселей.Когда я запускаю этот код в Safari на iPad, кнопки становятся шире.Есть ли минимальная ширина для кнопок?Можно ли переопределить эту ширину?
Отвечая на мой собственный вопрос: очевидно, минимальная ширина зависит от размера шрифта. Таким образом, установив размер шрифта на 0, я могу сделать кнопки меньше. Я понимаю, что маленькие кнопки не годятся для сенсорных устройств, таких как iPad, поэтому я, вероятно, создам альтернативную, более сенсорную версию интерфейса.
Только сейчас столкнулся с той же проблемой. Я провел небольшое исследование / исследование, которое показало, что размер шрифта влияет на горизонтальные отступы (как левый, так и правый). Итак, чтобы исправить это - явно укажите padding: 0 или любой другой требуемый вами отступ. iOS 11.2, iOS 10.3.3
padding: 0