css - Chrome 和 Firefox 中不同的行高

Question

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

似乎是行高的问题。我在 CSS 重置中有 line-height: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;
    }
}