有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 只是将位置舍入为整数像素。在某些情况下，这两种方法给出的答案相差一个像素。

无论如何，如果您确实需要的话，请确保您的半行距是整数（即行高减去字体大小是偶数）将使渲染更加一致。

尝试这个：

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

另一种可能的解决方案：

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