Chrome和Firefox中的行高不同

Question

http://i.imgur.com/WnRm9aw.png

似乎是行高的问题。我在CSS重置中有行高：1，这似乎导致了这个问题。但是，即使我为该元素设置了特定的行高（以像素为单位），仍然存在差异。

当我完全从CSS重置中删除line-height属性时，它确实使两个浏览器中的间隙相等，但橙色背景 - 父 - 在Chrome中被拉伸了6个像素。

有没有解决方法？感谢

Answer 1

我遇到过许多浏览器以不同方式解释CSS的问题。一种选择是查看Chrome是否通过用户代理样式表或其呈现过程向元素添加额外的填充。如果是这样，您可以尝试尝试使用它来获得有效的解决方案： https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-padding-start

另一种不太可取的可能性是在CSS中执行此操作（检测webkit浏览器，即Chrome和Safari）并覆盖填充样式，以便它们在两个浏览器中显示相同：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourDiv {
        padding: 2px;
    }
}