iPhone ‹button› набивка неизменна?

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

Как мне избавиться от этой прокладки?


iphone css mobile-safari webkit
person bushytop    schedule 07.08.2010    source источник
comment
Вы пытались указать CSS padding и, если это не работает, свойство border для кнопки, чтобы отключить рендеринг собственного графического интерфейса?   -  person Pekka    schedule 07.08.2010

Ответы (6)


arrow_upward
11
arrow_downward

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

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

<button><span>Submit</span></button>
person YMMD    schedule 01.03.2011
comment
Вы, сэр, гений! Я использую их без span. Установка width достаточно большого размера, чтобы включить дополнительные отступы, отсортировала его, теперь у меня есть моя идеально круглая кнопка с центром. - person Eystein; 19.10.2011

arrow_upward
8
arrow_downward

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

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

Вы можете увидеть некоторые из этих здесь в работе.

person David Kaneda    schedule 07.08.2010
comment
Очень умное решение, которое должно сработать. Но я это уже пробовал - без кубиков. - person bushytop; 08.08.2010
comment
Похоже, это ошибка в браузере iPad версии 4.1. Грустный :( - person Joshua; 17.11.2010
comment
Эта ошибка исправлена ​​в iOS 4.2, доступной в XCODE 3.2.5. - person Marin; 07.12.2010

arrow_upward
1
arrow_downward

Я преодолел эту проблему, заключив <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"> или связанными элементами, поскольку они не могут содержать дочерние элементы.

person thomp132    schedule 25.08.2010
comment
Отрицательная маржа работает? В ПОРЯДКЕ. Я надеялся, что до этого не дойдет, но, думаю, это работает. Спасибо. - person bushytop; 26.08.2010
comment
IOS 5 исправляет эту ошибку, поэтому этот хак фактически ломает кнопки iPhone 4 ... Так как же нам разблокировать IOS 5? - person Jethro Larson; 05.03.2012

arrow_upward
0
arrow_downward

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

person Märt    schedule 27.09.2010

arrow_upward
0
arrow_downward

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

text-indent:-6px;
person SimplGy    schedule 21.12.2010

arrow_upward
-1
arrow_downward

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

box-sizing: conter-box;
person Rusher    schedule 20.08.2014