HTML5 espace réservé css padding

J’ai le même problème.

Je l’ai corrigé en supprimant la hauteur de ligne de mon entrée. Vérifiez s’il y a des lignes qui causent le problème

J’ai eu un problème similaire, mon problème était avec le remplissage latéral, et la solution était avec, text-indent, je n’étais pas au courant que le retrait de texte affectait la position côté placeholder.

 input{ text-indent: 10px; } 

Si vous souhaitez conserver votre hauteur de ligne et forcer l’espace réservé, vous pouvez directement modifier le CSS d’espace réservé depuis les nouvelles versions du navigateur. Cela a fait le tour pour moi:

 input::-webkit-input-placeholder { /* WebKit browsers */ line-height: 1.5em; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ line-height: 1.5em; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ line-height: 1.5em; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ line-height: 1.5em; } 

 line-height: normal; 

travaillé pour moi;)

J’ai eu un problème, qui apparaît juste dans Internet Explorer. Le champ de saisie a été stylé

 height:38px; line-height:38px; 

Malheureusement, dans IE, l’espace réservé initial n’apparaît pas au bon endroit. Mais lorsque j’ai cliqué sur le champ et que j’ai quitté ce champ, l’espace réservé est apparu sur la bonne position.

Ma solution était de définir:

 line-height:normal; 

La suppression de la hauteur de ligne permet en effet d’aligner votre texte sur votre texte d’espace réservé, mais cela ne résout pas correctement votre problème car vous devez adapter votre conception à cette faille (ce n’est pas un bogue). Ajouter un alignement vertical ne fera pas l’affaire non plus. Je n’ai pas essayé dans tous les navigateurs, mais cela ne fonctionne pas dans Safari 5.1.4 à coup sûr.

J’ai entendu parler d’un correctif jQuery pour cela, qui n’est pas compatible avec les espaces réservés entre navigateurs (jQuery.placeholder), mais pour les espaces réservés, mais je ne l’ai pas encore trouvé.

En attendant, vous pouvez résoudre le tableau de cette page qui montre différents supports de navigateur pour différents styles.

Edit: Trouvé le plugin! jquery.placeholder.min.js vous offre à la fois des fonctionnalités de styling complètes et une prise en charge multi-navigateur.

Réglage line-height: 0px; réparé pour moi en Chrome

J’ai créé un violon en utilisant votre capture d’écran en tant qu’image d’arrière-plan et en supprimant le balisage supplémentaire, et cela semble fonctionner correctement.

http://jsfiddle.net/fLdQG/2/ (navigateur webkit requirejs)

Est-ce que ça marche pour toi? Sinon, pouvez-vous mettre à jour le violon avec votre balisage exact et votre CSS?

J’ai remarqué le problème au moment où j’ai mis à jour Chrome sur os x vers la dernière version stable (9.0.597.94). Il s’agit donc d’un bogue de Chrome qui, espérons-le, sera corrigé.

Je suis tenté de ne pas essayer de contourner ce problème et d’attendre le correctif. Cela signifiera simplement plus de travail à faire.

L’espace réservé n’est pas affecté par l’ line-height de la line-height et le padding est incohérent sur les navigateurs.

J’ai cependant trouvé une autre solution.

VERTICAL-ALIGN . C’est probablement la seule fois où cela fonctionne, mais essayez-le plutôt et creusez de nombreuses lignes de code CSS.

Supprimer la hauteur de ligne ou définir en utilisant le remplissage … ça marche dans tous les navigateurs

J’ai trouvé la réponse à mes frustrations concernant le blog de John Catterfeld .

… Chrome (v20-30) implémente presque tous les styles, mais avec une mise en garde majeure: les styles d’espace réservé ne redimensionnent pas la zone de saisie, évitez les choses telles que la hauteur de ligne et le remplissage supérieur ou inférieur.

Si vous utilisez une hauteur de ligne ou un remplissage, vous allez être frustré par le paramètre fictif résultant. Je n’ai pas trouvé un moyen de contourner cela jusqu’à présent.