jQuery/CSS:"normal"的行高==？px

Question

我正在打电话$("#foobar").css("line-height")并恢复"正常".如何将其转换为像素数量？CSS规范中是"正常"定义还是浏览器特定？

Answer 1

根据这个页面,似乎大多数最近的浏览器使用相同的值line-height: normal:1.14,id est font-size属性为1.14系数.

尝试使用多种浏览器(在Windows XP上):

编辑

我错了,line-height要看的font-family,font-size您的浏览器,也许你的操作系统...

Answer 2

Normal实际上被称为abnormal在几个实例上,因为存在相当大的浏览器不一致性.

声明行高:正常不仅在浏览器之间有所不同,这是我预期的 - 事实上,量化这些差异是整个点 - 但它们也从一个字体到另一个不同,并且也可以在给定的面内变化.

我认为它的价值提供一个链接回Eric Meyer的网站为您报价的来源,一个迷人的读:http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/ (7认同)
@MartinJespersen我不会删除答案,因为即使在现在阅读之后,我仍然认为我回答正确,因为"正常"是特定于浏览器的,因此,浏览器不一致,不应该转换为像素.这就是说我非常感谢你花时间提供关于downvote的反馈,谢谢!:) (2认同)

Answer 3

normal是一个有效的设置,line-height因此对于将返回该浏览器的浏览器没有真正的解决方法.

或者,您可以使用.css('height'),因为它只计算元素的内部部分,而不是填充/边框/边距.如果你有一个多行元素,或者一个元素不仅仅包含文本,那么这需要一点创造力.

编辑:一个解决方案的例子

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

在元素内,然后找到你可以使用.height()#def 的行高,因为它总是只有一行,因此,父元素的行高.

Windows XP中的Chrome是normal在该jsfiddle 中返回的浏览器的示例,除非另有明确指定.Firefox返回像素数.normal是每W3规格的初始值. http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height