在 Safari/Mac 中定位 1px，但在 Safari/Windows 上有效答案

【问题标题】：Positioning 1px off in Safari/Mac but works on Safari/Windows在 Safari/Mac 中定位 1px，但在 Safari/Windows 上有效
【发布时间】：2011-02-07 06:06:03
【问题描述】：

我正在用头撞墙；徽标图像（“It's All About Revenue”）在 Mac 上的 Safari 中向上移动了一个像素，但在我能够测试的所有其他浏览器/操作系统组合中正确呈现。有没有人知道为什么会这样？这是网站：http://blog.eloqua.com/

提前感谢您的帮助！

【问题讨论】：

您是否尝试将 H1 的 line-height 设置为 1em ？（windows 和 macos 渲染字体和 lineheights 略有不同）
我刚刚尝试将 line-height 更改为 1em，但没有成功。谢谢你的建议
它在 Chrome 中也一样吗？
是的，它看起来确实也发生在 Linux 上的 Chrome 中。

标签： css macos safari

【解决方案1】：

<div class="parentLogo"> 元素的 height 属性在两个浏览器之间的计算方式不同：

你需要手动设置它的height属性：

.custom .parentLogo {
    height: 40px;
    ...
}

这应该可以解决问题。

【讨论】：

6 年后仍然有用。谢谢！

【解决方案2】：

我多次遇到这个 1px 错误，尤其是在使用 CSS 重置时。这实际上是一个行高问题。

为所有浏览器设置基线高度：

body {
  line-height: 1em;
}

【讨论】：