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和内容的方法。您可以使用“Master”重置（如同Cowgod所建议的那样），但即便如此，这也不会最终解决对齐问题。因为实际的渲染引擎，它们在那里。将CSS归入您现有的网站并进行测试。告诉我它是否能让所有像素都完美无缺。它不会。

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

正如大卫上面所说，这很难。我实际上倾向于认为不可能。我花了好几个小时尝试，相信我！几乎疯了的次数比我想算的多。吞下这是一个难以忍受的药丸，但除非每个人都使用相同的浏览引擎（在我看来这实际上会让互联网大跃进），所以没有办法解决它。我的意思是，只要你插入[gecko] [webkit] [presto] [trident] [无论如何]来处理后端，就不会那么难以在你的浏览器上打出你想要的任何接口......这些都是开源的，您可以合并项目并真正开始。人们需要学会一起玩得很好;）

Answer 3

你可以解决这个问题：

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

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

Answer 4

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

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