FireFox 3线高

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

计算出的值line-height: normal在平台,浏览器(以及相同浏览器的不同版本,如您所述),字体甚至不同大小的相同字体之间有所不同(请参阅Eric Meyer的文章).

设置无单位值,例如......

body {line-height: 1.2;}

... 应该可以规范化浏览器之间的间距.如果这不起作用,您能否提供更详细的样式表说明？

获得"像素完美"结果很难(不可能？)但是为了获得尽可能可预测的结果,我尝试使用行高,当乘以font-size时产生一个很好的舍入值.我们无法知道用户代理的默认字体大小,但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像素.内的

元件的字体大小变为12个像素,但线高度并没有成为18个像素,而它仍然24个像素.这之间的区别line-height: 1.5和line-height: 150%.当body {line-height: 1.5;}被使用时,为白线高度

是 18个像素.