FireFox 3行高 [英] FireFox 3 line-height

问题描述

Firefox 3引入了一种新行为，其中，在取消设置时，line-height与其他浏览器呈现它的方式不同。因此，关键部分可能会在浏览器中过高。设置全局百分比不起作用，因为它的基础是不同的。设置无单位值如1也不起作用。有没有办法规范化这个维度？

Firefox 3 has introduced a new behavior in which line-height, when unset, differs from how other browsers render it. Thus, a critical section maybe render too high in that browser. Setting a global percentage doesn't work, since it's basis is different. Setting a unitless value such as "1" doesn't work either. Is there some way to normalize this dimension?

推荐答案

的计算值line-height： / code>因平台，浏览器（以及您所指定的浏览器的不同版本），字体，甚至不同大小的同一字体而异。（见Eric Meyer的文章）。

无单位值如...

body {line-height: 1.2;}

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

...should work to normalize the spacing between browsers. If this is not working, can you provide a more-detailed description of your stylesheet?

很难（不可能）获得像素完美的结果，为了获得尽可能可预测的结果，我尝试使用一个行高，当乘以字体大小时产生一个很好的舍入值。我们不知道用户代理的默认字体大小，但16像素是有点常见。

It's hard (impossible?) to get "pixel-perfect" results, but in order to get results that are as predictable as possible, I try to use a line height that produces a nice round value when multiplied by the font-size. We can't know the user agent's default font size, but 16 pixels is somewhat common.

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

如果用户代理的起始字体大小确实为16像素， 1.5 出来一个漂亮，甚至24像素。用户可以改变默认字体大小或页面缩放，不同的浏览器有不同的缩放页面的方法。然而，我认为我已经为大多数用户取得了合理的成功。如果我不能使行高精确出来，那么我拍摄一点以上的整数，而不是一点点，因为一些浏览器似乎截断值而不是圆。

If the user agent's starting font size is indeed 16 pixels then the line height of 1.5 comes out to a nice, even 24 pixels. Users can and do change the default font size or the page zoom, though, and different browsers have different methods of scaling the page. Nevertheless, I think I've had reasonable success for a majority of the users. If I can't make the line height come out exactly, then I shoot for a little above the integer rather than a little below, because some browsers seem to truncate values rather than round them.

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

Also, note that if you use a percentage for the line height, it behaves differently when the value is inherited.

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像素。

Starting from a base font size of 16 pixels, the line height will be 24 pixels. Within a <p> element the font size becomes 12 pixels, but the line height does not become 18 pixels, rather it remains 24 pixels. This is the difference between line-height: 1.5 and line-height: 150%. When body {line-height: 1.5;} is used, the line height for <p> is 18 pixels.

这篇关于FireFox 3行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！