jQuery/CSS: line-height of "normal" == ?px

Question

I'm calling $("#foobar").css("line-height") and getting back "normal". How do I translate this to a pixel amount? Is "normal" defined in the CSS spec or is it browser specific?

Answer 1

Normal is actually referred to as abnormal on several instances as there is quite a browser inconsistency.

declaring line-height: normal not only vary from browser to browser, which I had expected—in fact, quantifying those differences was the whole point—but they also vary from one font face to another, and can also vary within a given face.

Answer 2

normal is a valid setting for line-height so there isn't really a way around that for the browsers that will return that.

Alternatively, you can use .css('height') , as it will count only the interior section of an element, not padding/border/margin. It would take a little creativity if you had a multi-line element, or an element with more than just text in it.

http://jsfiddle.net/xVBfb/

Edit: An example of a work around would be having

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

within the element, then to find the line height you could just use the .height() of #def as it will always be only one line and thus, the line height of the parent element.

---

Chrome in Windows XP is an example of a browser that returns normal in that jsfiddle unless explicitly specified otherwise. Firefox returns a pixel count. normal is the initial value per w3 spec. http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height