2010-11-22 20 views
1

J'espère que quelqu'un pourra m'aider ici. J'ai un nom d'utilisateur/mot de passe standard qui soumet avec une balise <button> qui contient une petite image.HTML <button> contenant l'image, le rendu incorrect sur iPhone 4, des idées?

Le bouton est une largeur et une hauteur fixes sans marges, ni paddings, le texte est aligné à gauche et aucun autre contenu ne barre la balise <img. Et il a l'air bien et fonctionne comme vous l'attendez sur n'importe quel navigateur moderne sur mon PC Win7.

Sur iPhone 4 Safari (je n'ai pas d'iPad pour vérifier cela) le bouton apparaît dans la bonne largeur et la hauteur autant que je peux voir (en utilisant une couleur de fond). Il y a un écart inexplicable à gauche et une partie de l'image est perdue à cause du débordement.

J'ai été incapable de trouver un CSS qui semble causer cela, ou qui peut le réparer - c'est donc un désagrément. Quelqu'un at-il rencontré similaire? Parce que je travaille dans un espace limité (d'où la taille et le débordement fixes) juste en le quittant n'est pas vraiment mon option préférée car elle tue l'apparence de la boîte. Ma solution de contournement actuelle consiste à mettre au rebut l'étiquette du bouton et à soumettre le formulaire via un clic sur l'image, bien que je ne considère pas que ce soit idéal.

Donc, pour résumer - le bouton semble être correctement dimensionné et situé, mais son enfant IMG est rendu au mauvais endroit sur iPhone 4.

EDIT: Désolé, aurait dû inclure un lien ... wamdirect.co.uk est le site je travaille, le problème est dans la zone de connexion haut droite vue sur l'iPhone 4.

+1

vous pouvez partager tout code ou une url à un exemple? – albuvee

+0

GiV3 uS Ur CodEz! – Shikiryu

+0

Un peu de code et une capture d'écran serait excellent –

Répondre

1

ne pas utiliser <img>, utilisation:

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