CSS em与px（四舍五入误差）

Question

我一直在制作个人网站（所以时间不是问题），并创建了一个基础样式表，其中包括所有字体大小、边框宽度、行高等方面的处理。我努力使用 em 单位，但当我在其他浏览器（如 Chromium）上测试网站时，内容与我的“像素完美”网格不匹配。

因此，我的问题是，我应该使用 px 吗？我的意思是，我知道 em 是“正确的选择”，但现在大多数浏览器实现了全页面缩放（它们不仅调整文本大小），而在处理边框宽度和行高时，px 更加舒适，因为我可以避免子像素舍入。

你对此有何看法？（顺便说一句，支持 IE 不是我的目标；我不太关心它）

- pwseo

---

你能展示一段源代码和渲染差异的屏幕截图吗？ - Grzegorz Gierlik

Answer 1

这个内容与我的“像素完美”的网格不匹配。

如果您使用的是像素完美的网格，请使用像素值。 em 是一个相对值，仅在布局能够适应不同内容大小时才有效。

- Pekka

---

@pwseo 是的 :) 当然，如果您需要构建一个可访问的网站，支持移动设备等等，那么矢量图标当然有一些实质性的优势。 但是，如果您主要针对桌面设备，并且具有依赖像素完美度的布局，则px就是最好的选择。 - Pekka

是的，我想应该有类似于CSS中的calc()函数，可以实现像calc(2em - 1px)这样的计算:D - pwseo

Answer 2

我只会在元素的大小取决于字体大小时使用em。

像边框（及其宽度）这样的元素通常不取决于字体大小。

- Grzegorz Gierlik

---

我知道它们不依赖于字体大小，但当你混合边框和行高（这些确实依赖于字体大小）时，在某些情况下必须进行一些舍入，这就是不同浏览器呈现不同位置的原因。 - pwseo

Answer 3

当使用em来设置边距和填充时，我发现相对度量可能会产生一些有趣的问题。

em可以在嵌套元素中累积，你会发现自己需要将某些值调整回来以与外部元素对齐。

这看起来很好，直到你缓慢地缩小浏览器窗口，并发现有时嵌套元素的值会四舍五入到与外部父元素不同的像素。

为了解决这个问题，我在父级别上使用了rem来设置字体大小，并发现这使得父元素和子元素可以从相同的基本相对值工作。

- Luke Puplett