css - FireFox 3 行高

Question

Firefox 3 引入了一种新行为，其中行高在未设置时与其他浏览器呈现它的方式不同。因此，关键部分可能在该浏览器中渲染得过高。设置全局百分比不起作用，因为它的基础不同。设置无单位值(例如“1”)也不起作用。有什么方法可以规范这个维度吗？

Answer 1

line-height: normal 的计算值平台、浏览器(以及同一浏览器的不同版本，如您所说)、字体甚至相同字体的不同大小都不同 (see Eric Meyer's article) .

设置一个无单位的值，例如...

body {line-height: 1.2;}

...应该正常化浏览器之间的间距。如果这不起作用，您能否提供更详细的样式表描述？

很难(不可能？)获得“像素完美”的结果，但为了获得尽可能可预测的结果，我尝试使用在与字体相乘时产生漂亮的圆形值的行高-尺寸。我们无法知道用户代理的默认字体大小，但 16 像素有些常见。

body 
{
    font-size: 100%;
    line-height: 1.5;
}

如果用户代理的起始字体大小确实是 16 像素，那么行高为 1.5出来一个不错的，甚至 24 像素。不过，用户可以而且确实会更改默认字体大小或页面缩放，不同的浏览器有不同的缩放页面的方法。尽管如此，我认为我对大多数用户来说已经取得了合理的成功。如果我不能准确地显示行高，那么我会选择略高于整数而不是略低于整数，因为某些浏览器似乎会截断值而不是四舍五入。

另请注意，如果您使用百分比作为行高，则在继承该值时它的行为会有所不同。

body 
{
    font-size: 100%;
    line-height: 150%;
}

p
{
    font-size: 75%;
}

从 16 像素的基本字体大小开始，行高将为 24 像素。在 <p> 内元素的字体大小变为 12 像素，但行高不会变为 18 像素，而是保持 24 像素。这是line-height: 1.5之间的区别和 line-height: 150% .当body {line-height: 1.5;}被使用，行高为<p> 是 18 像素。