<input type="submit"> padding-bug auf Safari mobile?

(Dies ist ähnlich wie die (auch unbeantwortete) Frage #3430506, sondern gilt für input-tags anstelle von HTML5-Elemente.)

Auf <input type="submit"> Tasten, die das iPhone/mobile Safari-browser fügt padding Links und rechts. Dies geschieht nicht auf der desktop-version, noch irgendeine andere mobile - /desktop-Webkit-Browsern die ich ausprobiert habe. Es erscheint zum hinzufügen von font-size in px zu jeder Seite (D. H. 14px font-Mittel insgesamt width 14px + Breite des text + 14px).

Derzeit versuche ich im folgenden 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 gesehen, eine Menge Antworten über die mit -webkit-appearance:none... das macht keinen Unterschied. Weder das entfernen von abgerundeten Ecken. Ich machte eine Seite zur demo, wie die desktop-version macht diverse -webkit-appearance-Objekte; alle haben -webkit-border-radius:0 und der obige code angewendet.

Versuchen Sie diese auf dem desktop-Safari dann iPhone:
http://deleri.com/test.html

(Safari Mobile, screenshot für diejenigen ohne ein iPhone:)
deleri.com/safari.png

Zwar würde ich gerne wissen, warum dieser Fehler Auftritt, jetzt bin ich mehr sorgen um die Befestigung. Ich habe versucht, jede Art von display - /überlauf - /box-sizing/-webkit-alles/width:auto/text-indent-option denkbar, und kann es nicht reparieren, indem Sie die manuelle Einstellung der Breite (endgültige Breite muss der Prozentsatz-Basis, und die seltsamen Polsterung immer noch gilt). Ich fange an zu Fragen, ob es irgendeine obskure Eigenschaft, oder wenn der user-agent-stylesheet nicht überschrieben wird. Irgendwelche Gedanken?

InformationsquelleAutor pixi | 2010-08-18

  1. 2

    Wenn Sie versuchen, die Einstellung der Polsterung einen enormen Wert, sagen wir 100px, werden Sie feststellen, dass die oberen und unteren Polsterung wachsen, während wieder Links und rechts bleibt bei den default-Wert, im mobile Safari. Also ich nehme an, es ist sicher anzunehmen, dass dies ganz einfach zählt als ein Fehler in der webkit-Routinen iOS, und es gibt keine direkte Lösung, es sei denn, Apple behebt das problem.

    Workaround wäre ein DIV, das sieht aus wie, was Sie möchten, und fügen Sie einen onclick-handler, der übermittelt Ihre form. Keine Notwendigkeit zu immer von einem echten submit-button.

    Ich landete mit gerade <a> links mit einem JS-handler zu senden onClick... kann es nicht in die Finale Version, aber es ist eine gute temp-fix. Danke! (Daumen drücken, dass Apple behebt den Fehler bald.)

    InformationsquelleAutor Eric J. Francois

  2. 4

    Haben Sie die Kontrolle über die form? aka: hast du manuell eingeben, das Formular?

    Wenn ja, fügen Sie entweder eine id oder Klasse tag, es

    <input type="submit" id="submit" value="submit">

    dann stellen Sie Ihre css

    form input #submit { /* more specific to override webkit */
   -webkit-appearance:none;  
   -webkit-border-radius:0px;
   margin:0;  
   padding:0;  
   border:0;  
   display:block;
}
    Ich habe die Kontrolle über die form und versucht eine Mischung aus beiden ID ' s und Klassen, als styling; auch arbeitete. (Machte es so spezifisch wie möglich mit kein Glück.)
    Der text im value-Attribut der Schaltfläche war Weg, also habe ich nur Hinzugefügt -webkit-appearance:none und es ist zentriert, jetzt aber -webkit-border-radius funktioniert nicht mehr und ich hatte eine abgerundete Schaltfläche. Jedenfalls habe ich dadurch ein Quadrat-Taste ist besser, als ich abgerundet-Schaltfläche mit nur der Hälfte des Textes auf. Danke!
    ändern -webkit-border-radius: 0px zu -webkit-border-radius: 5px und Sie sollten am Ende mit einem Knopf mit einem 5px abgerundeten Ecken.

    InformationsquelleAutor canintex

  3. 3

    Ich hatte ein ähnliches Problem, und ich bemerkte, dass mein Problem behoben wurde, wenn ich den hintergrund einen Farbverlauf statt einfach nur hintergrund-Farbe.

    Diese irgendwie nur ignoriert die padding-Werte

    #submit{
    background:#a0b9dc;
    padding:9px 35px;
 }

    Den code unten gelöst, die Polsterung Problem für mich auf submit-buttons.

    #submit{
    background:#a0b9dc;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A0B9DC));
    background: -o-linear-gradient(bottom, #A0B9DC 0%);
    background: -moz-linear-gradient(bottom, #A0B9DC 0%);
    background: -webkit-linear-gradient(bottom, #A0B9DC 0%);
    background: -ms-linear-gradient(bottom, #A0B9DC 0%);
    background: linear-gradient(to bottom, #A0B9DC 0%);
    padding:9px 35px;
}
    Ja, das funktioniert aber border-radius wird nicht mehr angewendet, noch ein anständiges Update obwohl

    InformationsquelleAutor Liju Mathews

  4. 2

    Lief ich in diese Fehler heute, wenn meine Mutter erzählte mir, dass eine Seite, die ich gemacht hatte, war der fehlende text auf Ihrem alten iPhone 3G. Sicher genug, feuerte ich meine Frau alte 3G haben wir liegen in einer Schublade irgendwo, und der text auf einer meiner Tasten ist gedrückt an der Seite, da Safari wird das einfügen von einige Riesen Abstand.

    Die gute Nachricht ist, dass das neueste update (weiß nicht genau was, aber ich habe eine aktualisierte iPhone 4), dieser Fehler wurde behoben.

    Schlechte Nachricht ist, dass, wenn der Benutzer nicht aktualisieren Sie Ihren Browser, ich finde keine Möglichkeit um ihn herum, außerhalb der eben nicht mit dem tag.

    Mein Rat für jetzt ist, überprüfen Sie die version des Mobile Safari. Wenn Sie die neuste version (oder je nachdem, welche version den Fehler behoben oder höher), bekommen Sie die Seite mit dem button. Wenn nicht, können Sie serviert eine Seite mit alternativen tags verwendet, um die Tasten. Auf meiner Seite diese nicht so schön Aussehen, und es ist ein wenig umständlich, aber ich bin schon checking Browser basiert auf mobilen oder desktop-Version der Website, so dass dies nicht zu viel.

    Hoffe, das hilft.

    InformationsquelleAutor Isaac

  5. 1

    Könnte dies ein bekloppter Vorschlag, aber wenn das problem mit 

    <input type="submit" />

    könnten Sie versuchen, es zu ändern für 

    <button type="submit" />

    Die nicht die gleiche Sache, aber nicht haben könnte das der Fehler??

    Danke für den Vorschlag, aber leider ist der gleiche Fehler, siehe Frage #3430506 oben verlinkten.

    InformationsquelleAutor hellweaver666

Schreibe einen Kommentar