iPhone <button> wyściółka jest niezmienna?

Question

HTML5 <button> w przeglądarce Mobile Safari wydaje się mieć stałe, niezmienne lewe i prawe wypełnienie. Here's a demo oraz jego wygląd w Safari 5 i iOS4.

Jak mogę się pozbyć tego wypełnienia?

Answer 1

prostu zorientowali się, że „dodatkowa wyściółka” jest zawsze 1 em. W przypadku korzystania z liczby bezwzględne dla font-size, można ustawić rozmiar czcionki na przycisku do 0 i przywrócić go do elementu wewnętrznego:

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

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

Answer 2

Tak długo, jak nie potrzebujesz natywnego przycisku sterującego, i dobrze się czujesz robiąc własny styl w CSS, po prostu dodaj -webkit-appearance: none, a powinieneś uzyskać pełną kontrolę nad elementem.

Możesz również spróbować uzyskać -webkit-appearance: button lub -webkit-appearance: pushbutton, aby uzyskać domyślną stylizację.

Możesz zobaczyć niektóre z tych at work here.

Answer 3

mam rozwiązać ten problem poprzez owinięcie <button> zawartość w <div> jak tak ...

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

lub za pomocą jQuery i dodanie następujących do skryptu ...

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

... i zawiera następujące style na stronie

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

Pamiętaj, że możesz zmienić wewnętrzne wypełnienie div, aby odpowiadało Twoim potrzebom. Zwróć też uwagę, że działa to tylko z elementami <button>, a nie z obiektami pokrewnymi, ponieważ nie mogą zawierać elementów potomnych.

Answer 4

Po przejściu przez przyciski na tydzień wyrzuciłem je i teraz używam div-s. Jeśli dodasz display: inline-block; do przycisku div, może on być wyśrodkowany jak przycisk.

Answer 5

"Najczystsze" rozwiązanie, które znalazłem, nie wymaga żadnych dodatkowych elementów, ale zakłada pewną stałą wielkość z Twojej strony. Nod do thomp dla negatywnej idei marginesu. To jest podobne. Będzie to przeciwdziałać dodatkowy padding:

text-indent:-6px; 

Answer 6

to jest bug | cechą wszystkich przeglądarek WebKit. spróbuj dodać

box-sizing: conter-box;