jQuery/CSS：“正常”的行高 == ?px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3614323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery/CSS: line-height of "normal" == ?px
提问by JamesBrownIsDead
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?
我正在打电话$("#foobar").css("line-height")并恢复“正常”。我如何将其转换为像素数量？“正常”是在 CSS 规范中定义的还是特定于浏览器的？
回答by zessx
According to this page, it seems most of recent browsers use the same value for line-height: normal: 1.14, id est the font-sizeproperty with a 1.14 coefficient.
根据这个页面，似乎大多数最近的浏览器使用相同的值line-height: normal：1.14，id estfont-size属性的系数为 1.14。
Tried with several browsers (on Windows XP) :
尝试使用多种浏览器（在 Windows XP 上）：
- Chrome 21.0.1180.75
- Firefox 14.0.1
- Safari 5.1.7
- Opera 11.64
- IE 7
- IE 8
- 铬 21.0.1180.75
- 火狐 14.0.1
- Safari 5.1.7
- 歌剧 11.64
- 浏览器 7
- 浏览器 8
EDIT
编辑
I was wrong, line-heightdepends of font-family, font-size, your browser, maybe your OS...
我错了，line-height要看的font-family，font-size您的浏览器，也许你的操作系统...
More reading on Eric Meyers' website.
更多阅读Eric Meyers 的网站。
回答by Frankie
Normal is actually referred to as abnormalon several instancesas there is quite a browser inconsistency.
正常实际上abnormal在几个实例中被称为，因为浏览器存在很大的不一致。
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.
声明 line-height: normal 不仅因浏览器而异，这是我所期望的——事实上，量化这些差异是重点——而且它们也因一种字体而异，并且在给定的字体中也可能有所不同。
回答by Robert
normalis a valid setting for line-heightso there isn't really a way around that for the browsers that will return that.
normal是一个有效的设置，line-height因此对于将返回它的浏览器来说，并没有真正的解决方法。
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.
或者，您可以使用.css('height')，因为它只会计算元素的内部部分，而不是填充/边框/边距。如果你有一个多行元素，或者一个不仅仅是文本的元素，那就需要一点创造力了。
Edit:An example of a work around would be having
编辑：解决方法的一个例子是
<span id='def' style='line-height:inherit;display:none;'> </span>
<span id='def' style='line-height:inherit;display:none;'> </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.
在元素内，然后要找到行高，您可以使用.height()#def ，因为它始终只有一行，因此是父元素的行高。
Chrome in Windows XP is an example of a browser that returns normalin that jsfiddle unless explicitly specified otherwise. Firefox returns a pixel count. normalis the initial value per w3 spec.
http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
Windows XP 中的 Chrome 是浏览器的一个示例，normal除非另有明确指定，否则会在该 jsfiddle中返回。Firefox 返回像素数。normal是每个 w3 规范的初始值。
http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
回答by Bhojendra Rauniyar
Exactly calculating normal line-height in pixel is difficult. Though, according to MDNit's roughly 1.2em.
以像素为单位精确计算正常的行高是很困难的。不过，根据MDN，它大约是 1.2em。
If you've:
如果你有：
body{
font-size: 16px;
}
So, your website has normal font-size as 16px then the normal line-height would be roughly 24px. This means you can calculate normal font-size pixel value multiplied by 1.5that is 16px * 1.5 == 24px
因此，您的网站的正常字体大小为 16px，那么正常的行高将大致为24px. 这意味着您可以计算正常字体大小像素值乘以1.5它是16px * 1.5 == 24px
Notice: I didn't multiplied by 1.2 because there's difference between px value and em value.
注意：我没有乘以 1.2，因为 px 值和 em 值之间存在差异。
回答by Naser Yousefi
However this was written a long time ago but helped me to wrote temporary solution in my task. I'm copying this code than maybe other people can use it.
然而，这是很久以前写的，但帮助我在我的任务中编写了临时解决方案。我正在复制此代码而不是其他人可以使用它。
$('#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);
});
