1

我有这个声明

body {font: normal .625em/1.2em Arial, sans-serif;}

我通常希望任何段落标签等都会继承行高并将其调整为特定的大小。例如

p {font-size: 2.0em}

假设基本 16px 浏览器字体大小 * .625 = 10px * 2.0em = 20px 20px 上的 1.2em 行高为 24，则行高应为 24px。

奇怪的是它似乎只渲染为 1em

如果我将正文声明更改为

body {font: normal .625em/1.2 Arial, sans-serif;}

省略它正确呈现的 em 单位。所以我想我的问题已经解决了，但我以前从未见过这种情况，而且我很困惑为什么会这样。有谁知道它的原因？抱歉，我无法指向我在本地构建的网站。

4

2 回答 2

2

Eric Meyer 几年前写过关于“无单位线高”的主题：http: //meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

基本上，如果包含单位，则行高基于祖先元素的字体大小，而不是当前元素的字体大小。

于 2012-12-05T00:15:37.163 回答
0

继承属性时，继承的值是“<a href="http://www.w3.org/TR/CSS21/cascade.html#computed-value" rel="nofollow">计算值”。这意味着如果您声明一个值1.2emfor body，那么body字体大小将乘以 1.2，结果是任何body没有设置属性的子级将继承的值。不管他们自己的字体大小是多少。

对于line-height，有一个关于使用纯（无单位）数字的特殊规则：“属性的使用值是这个数字乘以元素的字体大小。[…] 计算值与指定值相同。” 这意味着当您将值指定为 时， （“使用值”）的行高与使用1.2获得的行高相同，但继承的值（“计算值”）是纯数字 1.2。这意味着它将乘以每个元素自己的字体大小。body1.2em

士气是line-height通常应该使用纯数字来设置的。此外，通常最好为所有元素设置它，避免对其进行所有继承，例如* { line-height: 1.3; }. （顺便说一句，Arial 1.3 一般比 1.2 好。StackOverflow 使用 1.3 对应的值，以 Arial 为主要字体，这里的行高几乎不会过分。但这当然取决于行长等因素。）

于 2012-12-05T06:54:39.997 回答