css - 使用 Em 的为什么浏览器计算 Padding, Margin, line-height 错误？

Question

我正在开始一个新项目，并认为我会在之前给出 em，但我注意到当使用 em 用于填充、边距、行高等（除字体之外的任何内容）时，浏览器无法正确计算它们。

例子：

我使用 Firebug 使用像素快速定位元素，然后使用公式像素大小/基本字体在我的样式表中翻译它们。所以 25px / 16px = 1.5625

当我刷新浏览器时，元素出现了几个像素，似乎我必须向上或向下舍入，或者在某种情况下它真的出现了！

是只有我还是有其他人注意到或有解决方案？

答：我的基本字体错了！！

score 1 · Accepted Answer

我使用公式像素大小/基本字体在我的样式表中翻译了它们。所以 25px / 16px

如果您使用的是 em，最好留下像素。16px 基本字体的想法是不可靠的。它只是一个通用指南，因为您不知道用户的实际基本字体（系统字体）大小是什么，因为他们可以将其设置为任何内容（尽管大多数人可能不会碰它）。

当你处理像素的百分比时，每个浏览器都有自己的处理方式（例如向上或向下舍入），你必须让浏览器做它的事情。在 Web 上，一切都是相对的，只要您将页面的元素都设置为彼此之间的良好比例，设计应该在任何缩放级别或视口宽度下都能很好地工作。

score -2 · Accepted Answer

当嵌套在子元素中时，EM 会变得复杂。例如，如果您使用 body font-size: 为 16px，然后在标题中您有 1.1em，然后在该标题中您有菜单项并将其设置为 1em，它将等于 1.1em 的父项（大多数可能在 18px 左右）。

解决这个问题的方法是使用 REM，它代表“根”EM。这可以防止您的尺寸在嵌套时被复合。但是，各种浏览器对此的支持有限。要解决这个问题，您可以使用 PX 后备。在回退中，任何浏览器都将使用最后一个可接受的规则。如果它不理解规则 (REM)，它会忽略它，从而使用 PX。

header {
   font-size: 18px;
   font-size: 1.1rem;
}
nav {
   font-size: 16px;
   font-size: 1rem;
}

最后，重要的是要了解 EM/REM 类似于 PERCENTAGES，而不是固定像素。

2 回答 2