什么是线高“正常”的铬?[副本]

根据 this page ,似乎大多数最近的浏览器使用相同的值 line-height: normal :1.14,id est the font-size 系数为1.14的属性。

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

• 铬21.0.1180.75
• 火狐14.0.1
• 野生动物园5.1.7
• 歌剧11.64
• 工业工程7
• 工业工程8

编辑

我错了, line-height 取决于 font-family , 字体大小 ,你的浏览器,也许你的操作系统。。。

更多阅读 Eric Meyers' website .

正常实际上是指 abnormal 在 several instances 因为浏览器不一致。

声明行高:不仅正常 不同的浏览器,我 已经预料到事实,量化 这些差异就是全部 点-但它们也不同于一种字体 面对另一个人,也可以改变 在一张给定的脸内。

normal 是的有效设置 line-height 所以对于浏览器来说,并没有一个真正的办法来解决这个问题。

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

http://jsfiddle.net/xVBfb/

编辑: 解决问题的一个例子是

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

在元素中,然后要找到线条高度,可以使用 .height() ,因为它始终只有一行,因此父元素的行高。

Windows XP中的Chrome是一个返回 正常的 在jsfiddle中,除非另有明确说明。Firefox返回像素计数。 正常的 是w3规范中的初始值。 http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

精确计算像素的法向直线高度是困难的。不过,根据 MDN 大约是1.2米。

如果你有:

body{
  font-size: 16px;
}

所以,你的网站的正常字体大小是16px,那么正常的行高大概是 24px . 这意味着您可以计算正常字体大小像素值乘以 1.5 那就是 16px * 1.5 == 24px

注意:我没有乘以1.2,因为px值和em值之间存在差异。

然而,这是很久以前写的,但帮助我在任务中编写了临时解决方案。我正在复制这个代码,也许其他人无法使用它。

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