jQuery/CSS: altura de línea de "normal" ==? Px

Question

Llamo a $("#foobar").css("line-height") y vuelvo a "normal". ¿Cómo traduzco esto a una cantidad de píxeles? ¿Está definido "normal" en la especificación de CSS o es específico del navegador?

Answer 1

Normal en realidad se conoce como abnormal en several instances ya que hay una gran incoherencia del navegador.

declarar line-height: normal, no sólo variar de un navegador a otro, lo que me había esperado, de hecho, la cuantificación de esas diferencias fue el conjunto punto sino que también varían de una fuente cara a otro, y también puede variar dentro de una cara determinada.

Answer 2

normal es una opción válida para los line-height por lo que no es realmente una forma de evitar que los navegadores para los que devolverán eso.

Como alternativa, puede usar .css('height'), ya que solo contará la sección interior de un elemento, no el relleno/borde/margen. Se necesitaría un poco de creatividad si tuviera un elemento de varias líneas o un elemento con algo más que texto.

http://jsfiddle.net/xVBfb/

Editar: Un ejemplo de un trabajo en torno sería tener

<span id='def' style='line-height:inherit;display:none;'>&nbsp;</span>

dentro del elemento, a continuación, para encontrar la altura de la línea que sólo podría utilizar el .height() de #DEF ya que siempre será solo una línea y, por lo tanto, la altura de línea del elemento padre.

---

Chrome en Windows XP es un ejemplo de un navegador que devuelve normal en que jsFiddle menos que se especifique expresamente lo contrario. Firefox devuelve un conteo de píxeles. normal es el valor inicial por especificación w3. http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

Answer 3

Según this page, parece que la mayoría de los navegadores recientes utilizan el mismo valor para line-height: normal: 1,14, id est la propiedad font-size con un coeficiente de 1,14.

intentado con varios navegadores (en Windows XP):

• Chrome 21.0.1180.75
• Firefox 14.0.1
• Safari 5.1.7
• Opera 11.64
• IE 7
• IE 8

EDITAR

que estaba equivocado, line-height depende de font-family, font-size, su navegador, tal vez su sistema operativo ...

Más información en Eric Meyers' website.

Answer 4

Es difícil calcular la altura de línea normal en píxeles. Sin embargo, según MDN es aproximadamente 1.2em.

Si usted tiene:

body{ 
    font-size: 16px; 
} 

Por lo tanto, su sitio web tiene tamaño de fuente normal 16px entonces la línea de altura normal sería más o menos 24px. Esto significa que puede calcular el valor de píxel de tamaño de fuente normal multiplicado por 1.5 que es 16px * 1.5 == 24px

Aviso: No multipliqué por 1.2 porque hay diferencia entre el valor px y el valor em.

Answer 5

Sin embargo, esto fue escrito hace mucho tiempo pero me ayudó a escribir una solución temporal en mi tarea. Estoy copiando este código que quizás otras personas puedan usarlo.

$('#lineHeightInc') 
.click(function() { 
    var box = GetSelectedBox(); 
    var ct = box.data('LineHeight'); 
    if (isNaN(ct)) 
     ct = 0; 
    ct++; 
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px'); 
    box.data('LineHeight', ct); 
}); 

$('#lineHeightDic') 
.click(function() { 
    var box = GetSelectedBox(); 
    var ct = box.data('LineHeight'); 
    if (isNaN(ct)) 
     ct = 0; 
    ct--; 
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px'); 
    box.data('LineHeight', ct); 
});