html - 是否有 css 文本重置？

Question

你好，我有这个问题:

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

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

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

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

非常感谢。

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;
    }
}