jQuery / CSS: altezza riga di “normale” ==? px

Sto chiamando $("#foobar").css("line-height") e tornando “normale”. Come posso tradurlo in una quantità di pixel? È definito “normale” nelle specifiche CSS o è specifico del browser?

Secondo questa pagina , sembra che la maggior parte dei browser recenti utilizzi lo stesso valore per l’ line-height: normal : 1,14, id est la proprietà font-size con un coefficiente 1,14.

Provato con diversi browser (su Windows XP):

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

MODIFICARE

Ho sbagliato, l’ line-height della line-height dipende font-family font-size , font-size , dal browser, forse dal tuo SO …

Maggiori informazioni sul sito Web di Eric Meyers .

normal è un’impostazione valida per l’ line-height quindi non c’è un modo per aggirare quello per i browser che lo restituiscono.

In alternativa, puoi usare .css('height') , poiché conterrà solo la sezione interna di un elemento, non padding / border / margin. Ci vorrebbe un po ‘di creatività se avessi un elemento multi-linea o un elemento con più di un semplice testo.

http://jsfiddle.net/xVBfb/

Modifica: un esempio di un lavoro in giro sarebbe avere

all’interno dell’elemento, quindi per trovare l’altezza della linea si può semplicemente usare l’ .height() di #def in quanto sarà sempre una sola riga e quindi l’altezza della linea dell’elemento genitore.


Chrome in Windows XP è un esempio di browser che restituisce normal in quel jsfiddle se non diversamente specificato esplicitamente. Firefox restituisce un conteggio dei pixel. normal è il valore iniziale per w3 spec. http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

Normalmente viene definito abnormal in molte istanze in quanto vi è una certa incoerenza del browser.

dichiarare l’altezza della linea: normale non solo varia da browser a browser, cosa che mi aspettavo, anzi, quantificare quelle differenze era l’intero punto, ma esse variano anche da una faccia di carattere a un’altra e possono anche variare all’interno di una determinata faccia.

Il calcolo esatto della normale altezza della linea in pixel è difficile. Però, secondo MDN è approssimativamente 1.2em.

Se hai:

 body{ font-size: 16px; } 

Pertanto, il tuo sito web ha una normale dimensione del carattere di 16px, mentre l’altezza normale della linea sarebbe di circa 24px . Ciò significa che puoi calcolare il normale valore del pixel della dimensione del carattere moltiplicato per 1.5 ovvero 16px * 1.5 == 24px

Avviso: non ho moltiplicato per 1.2 perché c’è differenza tra valore px e valore em.

Tuttavia questo è stato scritto molto tempo fa, ma mi ha aiutato a scrivere una soluzione temporanea nel mio compito. Sto copiando questo codice piuttosto che altre persone possano 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); });