jQuery/CSS：“正常”的行高== ==？px

Question

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

Answer 1

正常实际上被称为abnormal在several instances，因为存在相当大的浏览器不一致性。

声明的line-height：正常不仅 从浏览器有所不同的浏览器，这是我 此前预计，事实上，量化 这些差异是整个 点，但也从一个字体 面变化另一个，并且也可以在给定的面内变化 。

Answer 2

normal是line-height的有效设置，因此对于那些将返回该值的浏览器并没有真正的解决方法。

或者，您可以使用.css('height')，因为它只会计算元素的内部部分，而不是padding/border/margin。如果你有一个多行元素，或者一个元素不仅仅是文本，它会带来一点创意。

http://jsfiddle.net/xVBfb/

编辑：周围的工作的一个例子是具有

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

的元素中，然后找到行高你可以只使用#def的.height()因为它总是只有一行，因此也就是父元素的行高。

---

浏览器在Windows XP是，除非明确规定，否则在返回的jsfiddle一个normal浏览器的一个例子。 Firefox返回一个像素数。 normal是每个w3规格的初始值。 http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

Answer 3

据this page，看来最近的浏览器使用line-height: normal相同的值：1.14，ID EST的font-size财产与1.14系数。

试图与几个浏览器（在Windows XP）：

• 的Chrome 21.0.1180.75
• 火狐14.0.1
• 的Safari 5.1.7
• 歌剧11.64
• IE 7
• IE 8

编辑

我错了，line-height取决于font-family，font-size，您的浏览器，也许你的操作系统...

更多阅读Eric Meyers' website。

Answer 4

精确计算像素中的法线高度很困难。虽然，根据MDN它大约1.2em。

如果您已经：

body{ 
    font-size: 16px; 
} 

所以，你的网站有正常的字体大小为16像素，然后正常的line-height将大致24px。这意味着您可以计算正常的字体大小像素值乘以1.5即16px * 1.5 == 24px

注意：由于px值和em值之间存在差异，所以我没有乘以1.2。

Answer 5

然而，这是很久以前写的，但帮助我在​​我的任务中写下临时解决方案。我正在复制这些代码，而不是其他人可以使用的代码。

$('#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); 
});