FireFox 3 行高

Question

Firefox 3 引入了一种新行为，其中行高在未设置时与其他浏览器的呈现方式不同。 因此，关键部分可能在该浏览器中呈现得太高。 设置全局百分比不起作用，因为它的基础不同。 设置无单位值（例如“1”）也不起作用。 有没有办法标准化这个维度？

Answer 1

line-height: normal 的计算值因平台、浏览器（以及同一浏览器的不同版本，如您所述）、字体甚至同一字体的不同大小而异 （请参阅 Eric Meyer 的文章）。

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

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

元素中，字体大小变为 12 像素，但行高不会变为 18 像素，而是保留 24 像素。 这就是 line-height: 1.5 和 line-height: 150% 之间的区别。 当使用 body {line-height: 1.5;} 时，

的行高为 18 像素。

Answer 2

你绝对无能为力。 每个浏览器都有渲染 CSS 和内容的方式。 您可以使用“主”重置（如cowgod建议的那样），但即使这样，这也不能最终解决对齐问题。 它们之所以存在是因为有实际的渲染引擎。 将 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 的 CSS 重置< /a>. 雅虎也有一个。