J'essaie de faire un style assez précis sur certains éléments de forme, ce problème me causant beaucoup de chagrin.
Si j'essaie de supprimer Rendu: in Cet exemple, le Je reçois le même comportement dans le chrome 16, Firefox 9 et Opera 11, il est donc clairement indépendant du moteur. Je peux résoudre le problème en ajoutant manuellement une hauteur, mais Je ne veux pas faire cela parce que je veux que la conception reste réactif . Quelqu'un peut-il m'aider à comprendre ce qui se passe ici et comment je peux vous assurer de manière fiable que le Rembourrage , Marge < / code>, frontière et décrit à partir d'un Affichage: bloquer ) afin que la taille du champ est purement déterminé par le texte, le champ de saisie finit par avoir quelques pixels de rembourrage supplémentaires que tout autre élément de niveau de bloc de la même manière. Voici un exemple:
http://jsfiddle.net/nottrobin/b9zfa/ 
obtient une hauteur calculée de
16px pendant que le 19px .
3 commentaires
4 Réponses :
Êtes-vous sûr d'utiliser exactement la même police (y compris la taille)?
Essayez d'ajouter Je n'ai jamais eu ce problème moi-même, mais je ne l'ai utilisé que comme un test quelque part dans IE9 ... SIZE BOX: BORD-BOX à l'entrée .
Les éléments de formulaire sont bordure par défaut, il les réinitialise pour être cohérent avec Content-box sur d'autres éléments.
Suppression du Voir Fiddle . Testé uniquement dans FF Tho. Hauteur de ligne semble résoudre le problème.
Il n'y a pas line-height: medium , il fonctionne parce que vous avez retiré la manière efficace la hauteur de ligne en passant une valeur non valide. Pourquoi enlever les travaux ligne de hauteur, c'est ce que je suis en train de comprendre.
Au lieu de retirer la hauteur de la ligne, en veillant à avoir hauteur de ligne: normale fonctionne.
Le Démo: http://jsfiddle.net/thinkingstiff/b7cmq/ CSS: mais cela n'explique pas Pourquoi le Voici une démonstration indiquant le minimum Démo: http://jsfiddle.net/thinkingstiff/zhreb/ sortie: html: CSS:
Merveilleuse explication, merci. Je n'ai pas complètement testé votre: navigateur croisé de la solution de premier enfant, mais il semble très prometteur. Je me demande si ce comportement n'existe peut-être que dans les navigateurs qui soutiennent le HTML5 "Placeholder"? Je suppose que les moteurs de rendu créent un élément à l'intérieur des champs de formulaire pour aider à manipuler le contenu en quelque sorte. Quoi qu'il en soit, c'est la réponse. Merci beaucoup.
@Robinwinslow IE7 + et tous les autres navigateurs: QuirksMode.org/css/Contents.html#t17 < / a>
pas ce que je voulais dire. Je voulais dire que le correctif de faire le
Ce correctif ne fonctionne pas dans Firefox pour définir hauteur de ligne en fonction de la taille de la police. Réglage des deux éléments sur un plus grand Valeur de la hauteur de ligne Fonctionne, comme indique la suppression la hauteur de ligne complètement. Mais cela ne vous permet toujours pas d'avoir des hauteurs plus petites que le minimum. Le correctif pour celui-ci utilise le première ligne pseudo-élément et le réglage sur Affichage: Inline-Block; . 
. Même
-webkit-apparence: aucun; ne le répare pas. Il semblerait qu'il y ait un vaudou invisible sur les intrants qui traite son contenu comme en ligne . Inline ÉLÉMENTS AVEZ MINIMUN LINE-HAUTEUR en fonction de la taille de la police, qui est le comportement que nous voyons ici. C'est pourquoi première ligne la corrige. Il semble s'agir de styler l'élément "enfant" de l'entrée hauteur de ligne sur Inline éléments. Le Honateurs
hauteur de ligne: 7px; . Le , même si sa valeur calculée est montrant 7px; , ne l'honore pas visuellement. 
4 commentaires
: première ligne bloc intérieur fonctionnerait cross-browser. Mais il sera probablement.
line-height plus petit que normale (autour 1-1.2em). Voir ceci: stackoverflow.com/questions/8981420/...
Je sais que je suis mois de retard à cette question, mais je courais à travers dans une recherche Google et je voulais ajouter une chose qui pourrait aider à clarifier quelques-unes des autres réponses en ce qui concerne le la forme par défaut style dans Firefox comprend une CSS maladroit: p> . code> dans Firefox input {
...
line-height: normal !important;
...
}
Supprimer
Line-hauteur: 1em à partir de.normalisé CSS pour les rendre de la même hauteur. Cela rendraitdiv à la même hauteur que votre fichier . Voir cette modification Fiddle@ Dave: Je confirme que Chrome 17.
Toute personne qui rencontre ce problème devrait exprimer son soutien de ces deux rapports de bogues BugZilla.Mozilla.org/ show_bug.cgi? id = 349259 bugzilla.mozilla.org/show_bug.cgi ? id = 697451