iPhone <button> Polsterung unveränderbar?

Question

Ein HTML5 <button> in Mobile Safari scheint feste, unveränderbare linke und rechte Auffüllung zu haben. Here's a demo plus wie es in Safari 5 und iOS4 aussieht.

Wie kann ich diese Polsterung loswerden?

Answer 1

Ich habe gerade herausgefunden, dass die "zusätzliche Polsterung" immer 1em ist. Falls Sie eine absolute Zahl für Ihren font-size verwenden, können Sie auf die Schaltfläche der font-size auf 0 gesetzt und es für das innere Element zurück:

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

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

Answer 2

Solange Sie nicht die native Schaltfläche Kontrolle sehen, und sind OK Ihren eigenen Stil in CSS tun, fügen Sie einfach -webkit-appearance: none, und Sie sollten die volle Kontrolle über das Element erhalten.

Sie könnten auch versuchen, -webkit-appearance: button oder -webkit-appearance: pushbutton zu versuchen, das Standard-Styling auch zu bekommen.

Sie können einige dieser at work here sehen.

Answer 3

ich dieses Problem zu überwinden haben, indem <button> Inhalte in einer <div> Umwickeln wie so ...

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

oder von jQuery verwenden und die folgenden zu einem Skript ...

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

... und einschließlich der folgenden Stile auf die Seite

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

Beachten Sie, dass Sie die Polsterung des inneren Divs an Ihre Bedürfnisse anpassen können. Beachten Sie auch, dass dies nur mit <button> Elementen und nicht mit <input type="button"> oder verwandten Elementen funktioniert, da sie keine untergeordneten Elemente enthalten können.

Answer 4

Nachdem ich eine Woche lang mit den Knöpfen herumgespielt habe, habe ich sie abgelegt und benutze stattdessen div-s. Wenn Sie display: inline-block; zum div-Knopf hinzufügen, kann es auch wie ein Knopf zentriert werden.

Answer 5

Die "sauberste" Lösung, die ich gefunden habe, erfordert keine zusätzlichen Elemente, sondern setzt eine gewisse Maßanpassung voraus. Nicken Sie sich für die negative Marge Idee. Das ist ähnlich. Dies wird der zusätzlichen Auffüllung entgegenwirken:

text-indent:-6px; 

Answer 6

, dass der Fehler ist | Merkmal aller Webkit-Browser. Versuchen Sie,

box-sizing: conter-box;