Saisie de texte sur Chrome: la hauteur de ligne semble avoir un minimum

Question

Je suis en train de style de saisie de texte avec une valeur, la saisie de texte avec un espace réservé, et de l'intervalle, à l'identique dans google Chrome. Plus précisément, je tiens à le contrôle de la hauteur de la ligne, indépendamment de la taille de la police.

Cependant, il semble y avoir une sorte de minimum hauteur de la ligne (ou quelque chose de provoquant un effet similaire) sur la valeur d'entrée, qui semble pousser le texte vers le bas en quelque sorte qui empêche l'identique de style.

Exemple de code HTML:

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

CSS:

div {
  line-height: 50px;
  font-family: Arial;
}

input,
span {
  font-size: 50px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

Et les résultats peuvent être vus à

http://plnkr.co/edit/oHbhKDSPTha8ShWVOC7N?p=preview et dans la capture d'écran suivante à partir de Chrome 44.0.2403.155 (64 bits) sur Linux:

Étrangement, l'espace semble être de style avec la ligne de hauteur, tandis que le texte de la valeur de l'entrée est positionné différemment. Je ne suis pas concerné avec la couleur de l'espace réservé à ce point.

Comment puis-je style tous les 3 éléments de sorte que le texte est dans la même position, où je suis en utilisant une mesure la hauteur de la ligne?

Je comprends que je ne peux il suffit de régler la hauteur de la ligne d' normal ou 1.2, ou de réduire la taille de la police, afin de rendre les éléments apparaissent de façon identique, mais ils n'auraient pas l'aspect visuel, je suis à la recherche pour.

Answer 1

Je pense que je l'ai fait!!!

Dans mon test, il semble que la hauteur de la ligne doit être d'au moins ~115% de la taille de police, donc si vous voulez 50px de haut élément, vous devez avoir ~43px pour des choses de tous les line-up:

Fig 1. Font-size 86% de 50px la hauteur de la ligne. Les choses de la ligne, mais ne pas honorer le 50px taille de la police demandée par l'OP.

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 43px Arial;
    line-height: 50px;
    padding: 0;
    vertical-align: middle;
	width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Si vous augmentez la taille de police souhaitée 50px alors le minimum de la hauteur de la ligne respecté par la zone d'entrée est de ~58px. Toute tentative pour compenser cela avec l'alignement vertical eu aucun effet dans l'entrée, mais on peut fixer l'élément de la hauteur et de masquer le dépassement de donner une cohérence (quoique pas entièrement respectable) apparence:

Fig 2. 50px texte obligeant à une hauteur de ligne de 58px qui est coupé avec trop-plein caché.

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 50px Arial;
    line-height: 58px;
    padding: 0;  
    height:50px;
    vertical-align: top;
    width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

À proximité, mais pas de cigare. Mais cela m'a fait penser - peut-être un pseudo-élément peut être moins restrictif? J'ai découvert que vous pouvez le style de l' input::first-line pseudo, même dans un input et que ce sera le respect de la hauteur, taille de police, la hauteur de la ligne et l'alignement vertical!

Donc voilà!!

Fig 3. Première ligne de pseudo-élément pour la victoire!

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 50px Arial;
    line-height: 50px;
    height: 50px;
    padding: 0;
    vertical-align: middle;
    width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}
input::first-line, span::first-line {
    vertical-align: middle;
}
/* weirdly the placeholder goes black so we have to recolour the first-line */
input::-webkit-input-placeholder::first-line {
    color:grey;
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Voici un jsFiddle du lot, de sorte que vous pouvez voir mon travail. ;)

https://jsfiddle.net/romz58cc/4/

Answer 2

Pourquoi est-ce arrivé?

Ce désalignement est causé par le signe, et je ne pense pas que vous trouverez un moyen d'aligner le texte si l' font-size et line-height sont les mêmes.

Pourquoi est-ce le signe d'une faute?

Le signe a un height de plus que le texte qui est à l'origine de l'alignement d'être biaisée.

Il y a quelques choses à l'appui de cette:

1. Vous pouvez voir la taille de l'accent circonflexe

• Cliquez sur dans la input et maintenez le bouton gauche de la souris. Faites glisser vers le haut et vers le bas et vous verrez que le texte va se déplacer
• Retirez height: 50px; de input, span. La taille de l' input va augmenter à l' height de l'accent circonflexe

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  line-height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

2. Le texte de l'espace réservé est correctement aligné

• Le texte de l'espace réservé n'est pas effectuée par l'accent circonflexe est donc correctement alignés
• Dès qu'un texte est ajouté à l' input l'alignement est jeté hors de la

Le résultat de l'accent circonflexe avoir un plus grand height , c'est que l' line-height est artificiellement augmenté provoquant le texte pour être hors de la ligne.

Cela peut être prouvé par:

• Évolution line-height de 58px. L'alignement du texte de l'espace réservé et span sera le même que l' input

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 50px;
  line-height: 58px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

• Évolution font-size de 45px. Le signe sera présent dans l' 50px height

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

Ce qui peut être fait?

Comme il n'existe aucun moyen pour faire style que le signe lui-même (pour faire plus court) le moyen le plus efficace de s'assurer que le texte est aligné serait d'utiliser un font-size qui est plus petit que l' line-height. Ce sera le signe plus petit et de l'empêcher d'augmenter artificiellement l' line-height de la input.

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

Alternativement, vous pouvez supprimer height et il suffit de spécifier un line-height égal à l' height de l'accent circonflexe:

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 50px;
  line-height: 58px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

Answer 3

J'ai fait un peu de l'expérimentation de la ligne des hauteurs dans les zones d'entrée et pense que je suis arrivé à une sorte de conclusion.

Il apparaît que si la taille de la police dans une zone de saisie est égal ou supérieur à la hauteur de la ligne, puis la boîte change de dimension et de son contenu (mais pas de l'espace réservé) changements pour s'adapter. Cela est évident si vous supprimez les hauteurs à partir de votre exemple.

  input, span {
    padding: 0;
    margin: 0;
    width: 100px;
    padding: 0;
    min-height: 0;
    display: inline-block;
    font-family: inherit;
    border: 2px solid red;
    vertical-align: middle;
  }

  input, input::-webkit-input-placeholder, span {
    line-height: 50px;
    font-size: 50px;
  }

  

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Si vous définissez l' font-size plus petit que la hauteur de la ligne, vous ne voyez plus l'étrange ligne-effet de hauteur et de tout le texte se trouve sur la même ligne:

  input, span {
    padding: 0;
    margin: 0;
    width: 100px;
    padding: 0;
    min-height: 0;
    display: inline-block;
    font-family: inherit;
    border: 2px solid red;
    vertical-align: middle;
  }

  input, input::-webkit-input-placeholder, span {
    line-height: 50px;
    font-size: 45px;
  }
   

  

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Voici un side-by-side exemple: http://codepen.io/Jivings/pen/OyOKOV

J'espère que cette aide, et au moins vous rapproche de la solution dans votre propre feuille de style CSS!

Answer 4

Essayez comme ça

Selon le lien: problème de hauteur de ligne dans Firefox avec les champs de saisie

hauteur de ligne en entrée ne changera pas à moins que vous ne changiez la taille de la police

Réduisez donc la taille de la police: 50px à 45px, ça ira bien.

Code ci-dessous

    div { 
line-height: 50px; 
font-family: Arial; 
} 

span,input[type="text"],input[placeholder]{ 
height: 50px; 
width: 100px; 
padding: 0; 
min-height: 0; 
display: inline-block; 
font-family: inherit; 
border: 2px solid red; 
overflow: hidden; 
vertical-align: top; 
font-size:45px; 

} 

::-webkit-input-placeholder { 
color:#000000; 

}
 

Answer 5

La hauteur de ligne à 1,2 (qui correspond à 120% de la taille de la police) fonctionne parfaitement en chrome

http://plnkr.co/edit/rJmXLRrGFpi46Vv5THm5?p=preview

   div, input, span {
      line-height: 1.2;
  }
 

Le seul changement que je fais est de changer les hauteurs de ligne de 50 pixels en 1.2. Cela ne casse pas la mise en page et les trois éléments sont bien alignés.

Donc, votre code original fonctionne bien dans firefox.