<input type = “submit”> Fehler beim Auffüllen auf Safari-Handys?
(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?