(Dies ähnelt der (auch unbeantworteten) Frage # 3430506, gilt jedoch für Eingabe-Tags anstelle von HTML5-Elementen.)

Auf den Schaltflächen <input type = "submit"> fügt der Safari-Browser für iPhone / Mobile links und rechts ein Auffüllen hinzu. Dies ist weder in der Desktop-Version noch in anderen von mir getesteten Mobil- / Desktop-Webkit-Browsern der Fall. Es scheint, als würde jeder Seite die Schriftgröße in px hinzugefügt (d. H. 14px-Schrift bedeutet, dass die Gesamtbreite 14px + Textbreite + 14px beträgt).

Derzeit versuche ich Folgendes, um es zu entfernen:

/* webkit user-agent stylesheet uses input[type="submit"] */

form input[type="submit"] { /* more specific to override webkit */ 
   -webkit-appearance:none;  
   -webkit-border-radius:0px;
   margin:0;  
   padding:0;  
   border:0;  
   display:block;
}

Ich habe viele Antworten zur Verwendung von -webkit-appear gesehen: none ... das macht keinen Unterschied. Abgerundete Ecken werden ebenfalls nicht entfernt. Ich habe eine Demo-Seite erstellt, auf der gezeigt wird, wie die Desktop-Version verschiedene Webkit-Objekte darstellt. Alle haben -webkit-border-radius: 0 und den oben angegebenen Code.

Versuchen Sie, diese auf Desktop-Safari und dann auf dem iPhone anzuzeigen:
http: //deleri.com/test.htm

(Safari Mobile-Screenshot für Benutzer ohne iPhone:)
deleri.com / safari.png

Während ich gerne wissen würde, warum dieser Fehler auftritt, mache ich mir jetzt mehr Sorgen, ihn zu beheben. Ich habe versucht, jede Art von Anzeige / Überlauf / Box-Größe / -webkit-irgendetwas- / Breite: Auto / Text-Einzug-Option vorstellbar, und kann es nicht durch manuelles Einstellen der Breite beheben (endgültige Breite muss in Prozent sein- basiert, und die seltsame Polsterung gilt immer noch). Ich frage mich, ob es sich um eine undurchsichtige Eigenschaft handelt oder ob das Stylesheet des Benutzeragenten nicht überschrieben wird. Irgendwelche Gedanken?