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

Answer 2

您绝对无能为力。每个浏览器都有呈现 CSS 和内容的方法。您可以使用“主”重置（正如牛神所建议的那样），但即便如此，这最终也无法解决对齐问题。它们在那里是因为实际的渲染引擎。将 CSS 应用到您现有的网站并对其进行测试。告诉我它是否使像素全面完美。不会的。

真正实现像素完美的唯一方法是为特定浏览器实现特定的 CSS。 Mozilla 有@-moz-doc，IE 有它自己的 hack，但这些都不是 W3C 规范的一部分，而且我们都知道标准很重要。所以没有太多选择。

正如大卫上面所说，这很难。我倾向于认为实际上是不可能的。我已经花了几个小时尝试，相信我！几乎发疯的次数比我想的要多。这是一颗难以下咽的药丸，但没有办法绕过它，除非每个人都使用相同的浏览引擎（在我看来，这实际上会让互联网向前迈进一大步）。我的意思是，只要你插入 [gecko][webkit][presto][trident][whatever] 来处理后端......那些都是开源的，你可以合并项目并真正开始。人们需要学会和睦相处；）

Answer 3

你可以解决这个问题：

将行高设置为 1，然后使用 padding-top 和 padding-bottom 在文本中设置为零，并将高度设置为 auto。

.zeroed_in_element {
    padding: 4px 2px 5px 2px;
    height: auto;
    line-height: 1;
} 

Answer 4

您应该始终“重置”样式以消除所有浏览器与元素样式的不一致。

我喜欢Eric Meyer's CSS Reset。 Yahoo也有一个。