Chrome 和 Firefox 中不同的行高答案

【问题标题】：Different line-height in Chrome and FirefoxChrome 和 Firefox 中不同的行高
【发布时间】：2013-10-27 10:43:11
【问题描述】：

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

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

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

有什么解决办法吗？谢谢

【问题讨论】：

Mozilla 的用户代理样式表似乎设置了默认的行高。也许将line-height 规则与!important; 后缀内联？
不幸的是似乎没有任何区别。
这是一个非常奇怪的问题，我在设计 UI 时经常遇到这个问题。希望这里有人有一个可行的解决方案。这是（我认为）浏览器检测（虽然仍然不可靠）可能是唯一解决方案的极少数情况之一。
邮政编码，不仅仅是截图。

标签： css

【解决方案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;
    }
}

【讨论】：

我发现了问题。我使用的字体不支持大写重音，所以我在字体松鼠中修复了它 - 但浏览器继续忽略新的“行高”。 IE。上口音溢出，不知何故导致了这个问题。我通过在 Chrome 中将 body line-height 设置为 0.9 来修复它。