是否有一个CSS文本重置？

Question

你好，我有这样的问题：

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

在Firefox似乎这比Chrome和Safari 1px的低。

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

如果有人有提示帮助我，那将会很棒。

非常感谢。

Answer 1

缺省行高在不同浏览器中以及在不同字体大小的不同字体系列中有很大差异。设置一个明确的行高地址。

这是由于浏览器处理亚像素文本定位的差异。如果您的行高为20像素，但字体大小为15像素，则文本需要位于行框顶部2.5像素处。 Gecko实际上是这样做的，WebKit只是把位置放到整数像素上。在某些情况下，这两种方法会给出像素差异的答案。

在任何情况下，如果您真的需要这样做，确保您的半前一个整数（即行高减去字体大小均匀）将使渲染更加一致。

试试这个：

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

---

另一种可能的解决方案：

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