Texto verticalmente central em um elemento de entrada

Question

Eu tenho o seguinte elemento de entrada (deliberadamente omiti atributos que não eram necessários para o exemplo):

<input type="text" style="display: block; height: 40px; font-size: 14px; line-height: 40px"/>

No Chrome e na Internet Explorer (provavelmente também na Opera), qualquer texto dentro da entrada será centrado verticalmente. No entanto, o Firefox parece ignorar essa declaração. Configurando -o para display: inline-block; Em vez disso, ou usando vertical-align: middle; não tem efeito no Firefox.

Eu também tentei definir os padrões superior e inferior 13px, e a altura para 14px, que (combinado com o tamanho da fonte) resultará em um elemento 40px alta. Isso funciona como esperado; exceto qualquer personagem com caudas (como g, q, j etc) são cortados na parte inferior.

Estou procurando uma solução de navegador cruzado para alinhar o texto verticalmente em uma caixa de entrada com uma altura fixa. O elemento de entrada terá seus próprios estilos de pairar e foco, portanto, fingindo a centralização posicionando o próprio elemento verticalmente em um 40px Espaço alto não é realmente uma opção.

Felicidades

Answer 1

Também tentei definir os reprodutores superior e inferior para 13px e a altura para 14px, que (combinada com o tamanho da fonte) resultará em um elemento de 40px de altura. Isso funciona como esperado; Exceto que quaisquer caracteres com caudas (como G, Q, J etc) são cortados na parte inferior.

Que tal definir apenas o preenchimento superior para 13px (não o inferior) e definir a altura para o espaço restante, assim:

<input type="text" style="display: block; height: 27px; padding-top: 13px; font-size: 14px">

Funciona como esperado no Firefox e no Chrome; Não tenho acesso ao IE no momento, mas estou bastante confiante de que funciona no IE também.