iPhone <button>набивка неизменна?

Question

HTML5 <button> в Mobile Safari, похоже, имеет фиксированные, неизменяемые левый и правый отступы Вот демоверсия плюс, как это выглядит в Safari 5 и iOS4.

Как мне избавиться от этого отступа?

Answer 1

Я только что понял, что "дополнительные отступы" всегда 1em.Если вы используете абсолютное число для размера шрифта, вы можете установить размер шрифта кнопки в 0 и сбросить его для внутреннего элемента:

button{
   font-size:0;
}
button span{
   font-size:14px;
}

<button><span>Submit</span></button>

Answer 2

Если вам не нужен внешний вид кнопки управления и все в порядке с вашим собственным стилем в CSS, просто добавьте -webkit-appearance: none, и вы получите полный контроль над элементом.

Вы также можете попробовать -webkit-appearance: button или -webkit-appearance: pushbutton, чтобы попытаться получить стиль по умолчанию.

Некоторые из них можно увидеть здесь .

Answer 3

Я преодолел эту проблему, обернув <button> содержимое в <div> примерно так ...

<button><div>Submit</div></button>

или с использованием jQuery и добавлением следующего к сценарию ...

$('button').wrapInner('<div/>')

... и включая на страницу следующие стили

button { padding: 0; }
button > div { margin: 0 -1em; padding: 0.4em 0.8em; }

Обратите внимание, что вы можете изменить отступы внутреннего div в соответствии со своими потребностями. Также обратите внимание, что это будет работать только с элементами <button>, а не с <input type="button"> или связанными элементами, поскольку они не могут содержать дочерние элементы.

Answer 4

Это ошибка | особенность всех браузеров webkit.Попробуйте добавить

box-sizing: conter-box;

Answer 5

«Самое чистое» решение, которое я нашел, не требует никаких дополнительных элементов, но предполагает некоторые фиксированные размеры с вашей стороны.Кивок, чтобы топнуть идею отрицательной маржи.Это похоже.Это будет противостоять дополнительному заполнению:

text-indent:-6px;

Answer 6

После недолгой работы с кнопками я сбросил их и теперь вместо них использую div-s. Если вы добавите display: inline-block; к кнопке div, она также может быть центрирована как кнопка.