有css文本重置？

Question

你好我有这个问题：

你可以看到左侧有一个截图，它是如何在chrome，右侧firefox。文字高度不一样。 html的结构很简单。它只是一个div，其中是一个字段集，其中放置了一个h1标签。周围有一个1px的边框。 h1标签的高度为20px，甚至是20px的行高。 next是一个大小相同的h2标签。问题是文字高度。

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

我在其最新版本中使用了eric meyers的css reset。所以它不应该由此造成。

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

非常感谢。

Answer 1

默认行高在不同浏览器中以及不同字体大小的不同字体系列中有很大差异。设置显式的行高地址。

这是由于浏览器处理子像素文本定位的方式不同。如果您的行高为20像素但字体大小为15像素，则文本需要位于距行框顶部2.5个像素处。 Gecko确实这样做，而WebKit只是将位置舍入为整数像素。在某些情况下，这两种方法给出的答案相差一个像素。

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

试试这个：

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

---

另一种可能的解决方案：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    div h1 {
        line-height:19px;
    }
}