HTML <button> enthält Bild, Rendering falsch auf dem iPhone 4, irgendwelche Ideen?

Question

Ich hoffe, jemand kann mir hier helfen. Ich habe ein Standard-Benutzername/Passwort-Formular, das mit einem <button> Tag, das ein kleines Bild enthält, übermittelt.

Die Schaltfläche hat eine feste Breite und Höhe ohne Ränder, Füllzeichen, Text auf der linken Seite ausgerichtet und keine andere Inhaltsleiste das <img> -Tag. Und es sieht gut aus und funktioniert so, wie Sie es von jedem modernen Browser auf meinem Win7-PC erwarten würden.

Auf iPhone 4 Safari (ich habe kein iPad, um das zu überprüfen) erscheint die Schaltfläche in der richtigen Breite und Höhe, soweit ich sehen kann (mit einer Hintergrundfarbe). Es gibt eine unerklärliche Lücke nach links und ein Teil des Bildes ist wegen des Überlaufs verloren.

Ich konnte keine CSS finden, die dies zu verursachen scheint, oder das kann es beheben - so ist dies ein Ärgernis. Hat jemand Ähnliches gefunden? Weil ich in begrenztem Raum arbeite (daher die feste Größe und der Überlauf), ist es nicht wirklich meine bevorzugte Option, da es das Aussehen der Box zerstört.

Meine aktuelle Problemumgehung besteht darin, das Button-Tag zu verwerfen und das Formular per Onclick auf das Bild zu senden, obwohl ich dies nicht als ideal betrachten würde.

Um es zusammenzufassen - die Taste, richtig bemessen und angeordnet zu sein scheint, aber sein Kind IMG wird an der falschen Stelle auf dem iPhone 4.

EDIT-Rendering: Leider haben Sie einen Link enthalten sollte ... wamdirect.co.uk ist die Seite ich arbeite, ist das Problem in der Login-Box oben rechts, wenn 4. auf dem iPhone betrachtet

Answer 1

do <img> nicht verwenden, Verwendung:

button 
{ 
    background-image: url(...); 
    background-repeat:no-repeat; 
}