10

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

4

4 回答 4

11

的计算值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 像素。在一个<p>元素内，字体大小变为 12 像素，但行高不会变为18 像素，而是保持 24 像素。line-height: 1.5这就是和之间的区别line-height: 150%。使用body {line-height: 1.5;}时，行高为<p> 18像素。

于 2009-01-21T19:35:41.897 回答
2

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

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

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

于 2010-01-24T09:32:03.350 回答
0

你可以解决这个问题：

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

.zeroed_in_element {
    padding: 4px 2px 5px 2px;
    height: auto;
    line-height: 1;
}
于 2012-05-07T16:22:29.020 回答
-2

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

我喜欢Eric Meyer 的 CSS Reset。 雅虎也有。

于 2009-01-21T17:56:05.187 回答