8

你好我有这个问题：

问题

如您所见，左侧是chrome的屏幕截图，右侧是firefox。文字的高度不同。html的结构很简单。它只是一个 div，其中是一个放置 h1 标记的字段集。周围有1px的边框。该 h1 标签的高度为 20px，甚至行高为 20px。接下来是一个大小相同的 h2 标签。问题是文本高度。

示例2

在 Firefox 中，这似乎比 chrome 和 safari 低 1px。

我在其最新版本中使用来自 eric meyers 的 css 重置。所以它不应该由此引起。

如果有人有帮助我的提示，那就太好了。

多谢。

4

1 回答 1

2

默认行高在不同的浏览器和不同字体大小的不同字体系列中相差很大。设置一个显式的 line-height 可以解决这个问题。

这是由于浏览器处理亚像素文本定位的方式不同。如果你的 line-height 是 20 像素，而 font-size 是 15 像素，那么文本需要放置在距离行框顶部 2.5 像素的位置。Gecko 实际上是这样做的，而 WebKit 只是将位置四舍五入到整数像素。在某些情况下，这两种方法给出的答案相差一个像素。

在任何情况下，如果你真的需要，确保你的半前导是一个整数（即 line-height 减去 font-size 是偶数）将使渲染更加一致。

试试这个：

div h1 {
  -webkit-padding-before: 1px;
}

另一种可能的解决方案：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    div h1 {
        line-height:19px;
    }
}
于 2013-03-18T17:53:25.953 回答