•  19-08-2019
  •  | 
  •  

题

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

有帮助吗？

解决方案

计算值 line-height: normal 平台、浏览器（以及同一浏览器的不同版本，如您所述）、字体，甚至同一字体的不同大小之间有所不同 （参见埃里克·迈耶的文章）.

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

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

其他提示

有绝对没有什么可以做。每个浏览器都有存在渲染CSS和内容的方式。您可以使用一个“大师”复位（如cowgod建议），但即使是这样，这并不是最终要固定取向的问题。他们是因为实际的渲染引擎的存在。苹果的CSS到您现有的网站并进行测试。告诉我，如果它使像素全线完美。它不会。

要真正实现完美的像素唯一的办法是实施具体的CSS为特定的浏览器。 Mozilla有href="https://developer.mozilla.org/en/CSS:@-moz-document" rel="nofollow noreferrer"> @ -moz-DOC ，IE有

正如David上面所说的，它很难。我倾向于认为是不可能的实际。我已经花了几个小时努力，相信我！几乎疯了更多的时间比我关心计数。这是一个困难的药丸吞下，但它周围有只是没有办法，除非每个人都使用相同的浏览引擎（这实际上会采取与互联网的巨大飞跃在我看来）。我的意思是，它不会那么难拍你想要的任何界面上的浏览器，只要你的插件[壁虎] [WebKit的] [急] [三叉戟] [无论]处理后端。既然良好那些都是开源的，可以合并的项目，真正走了。人们需要学习如何发挥好在一起;）

可以解决这个问题：

设置线高度为1，则在文本使用填充-top和填充底部，并自动设置高度为零。

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

您应该总是“重置”的风格，以消除所有浏览器的不一致性与元素的样式。

我喜欢 Eric Meyer的CSS重置。 雅虎具有一个还

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top