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

z0qdvdin  于 11个月前  发布在  jQuery
关注(0)|答案(6)|浏览(115)

我调用$("#foobar").css("line-height"),得到的结果是“normal”。我如何将其转换为像素数量?“normal”是在CSS规范中定义的,还是特定于浏览器?

kgqe7b3p

kgqe7b3p1#

根据this page,似乎大多数最近的浏览器使用相同的值为line-height: normal:1.14,id est的font-size属性与1.14系数。
尝试了几种浏览器(在Windows XP上):

  • Chrome 21.0.1180.75
  • 下载Firefox 14.0.1
  • Safari 5.1.7
  • Opera 11.64
  • IE 7
  • IE 8
    已编辑

我错了,line-height取决于font-familyfont-size,你的浏览器,也许你的操作系统。
更多关于Eric Meyers' website的阅读。

f5emj3cl

f5emj3cl2#

正常实际上是指abnormalseveral instances,因为有相当浏览器不一致。
声明line-height:normal不仅在不同浏览器之间有所不同,这是我所期望的--事实上,量化这些差异是关键--而且它们在不同的字体之间也有所不同,在给定的字体内部也会有所不同。

irtuqstp

irtuqstp3#

normalline-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中的Chrome是一个在jsfiddle中返回normal的浏览器示例,除非另有明确指定。Firefox返回像素计数。normal是根据w3规范的初始值。http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

cnjp1d6j

cnjp1d6j4#

精确计算像素中的正常行高是很困难的。虽然,根据MDN,它大约是1.2em。
如果您已经:

body{
  font-size: 16px;
}

字符串
所以,你的网站有正常的字体大小为16px,那么正常的行高大约是24px。这意味着你可以计算正常的字体大小像素值乘以1.5,即16px * 1.5 == 24px
注意:我没有乘以1.2,因为px值和em值之间存在差异。

avkwfej4

avkwfej45#

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

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

字符串

mnemlml8

mnemlml86#

以下是如何理解和使用CSS line-height属性:
CSS Line-Height:

line-height:正常|number|长度|初始|继承;

当你深入研究使用CSS行高值时,请密切关注本指南:

正常:这是标准行高,在大多数桌面浏览器上通常约为1.2,但它可能会因使用的字体系列而异。
长度:使用cm、pt或px等单位指定精确的行高。此度量将定义行框的高度。
百分比:设置元素相对于字体大小的行高。这允许可伸缩和响应式设计。
编号:输入一个数字将与当前字体大小相乘以获得行高。这种方法通常因其一致性和可预测的结果而受到青睐。
Initial:将属性重置为CSS规范中定义的默认值。
Inherit:行高取自父元素,保证继承样式一致。

在使用line-height属性时请参考这些定义,以增强文本元素的可读性和设计。

相关问题