浏览器将 `rem` 转成 `px` 时有精度误差怎么办？

Category（分类）: CSS Status: 未知

本文保留原文关于 rem、浮动、table-cell、亚像素布局和 LayoutUnit 的讨论，并对“浏览器把 rem 直接舍入成整数 px”这一容易误解的说法进行修正。

1. 问题背景

使用 rem 作为尺寸单位时，如果父元素是流式宽度，多个子元素需要在同一行排列，窗口缩放到某些宽度后可能出现换行。例如，两个子元素的理论宽度之和看起来正好等于父元素宽度，但其中一个子元素却被挤到了下一行。

原文将这个现象归因于“浏览器将 rem 转成 px 时有轻微偏差”。更准确地说，问题通常与以下因素共同相关：

rem 计算后产生了小数 CSS 像素；
布局阶段保留了小数几何尺寸，绘制阶段还要映射到设备像素；
子元素的 padding、border、margin 或 gap 没有计入预期宽度；
默认的 box-sizing: content-box 使实际占用宽度超过声明宽度；
浮动元素的放置规则与普通块布局不同；
容器宽度、滚动条和浏览器缩放改变了可用空间；
min-width、flex-shrink 等默认行为影响了最终布局。

原文配图：

流式布局中子元素换行示意图

“Firefox 窗口缩放到 569px 时发生换行”只能作为某个历史测试环境的现象，不能作为所有浏览器和所有页面的固定结论。要复现问题，必须同时记录 HTML、CSS、根元素字体大小、浏览器版本、缩放比例和设备像素比。

2. `rem`、CSS 像素与设备像素

rem 的含义是根元素（通常是 html）的字体大小：

html {
  font-size: 16px;
}

.box {
  width: 4rem; /* 64 CSS px */
}

这里的 px 是 CSS 像素（CSS pixel），不是显示器上的物理像素。rem 的计算关系可以表示为：

1rem = 根元素的计算字体大小
元素的 CSS 尺寸 = rem 数值 × 根元素字体大小

例如根元素字体大小为 16px 时：

4.1015625rem × 16px = 65.625 CSS px

CSS 计算值可以是 65.625px。浏览器并不需要在布局阶段立即把它强制转换为整数 65px 或 66px。

还要区分以下概念：

CSS 像素：CSS 布局使用的逻辑长度单位；
设备像素：屏幕硬件上的物理像素；
设备像素比（DPR）：设备像素与 CSS 像素之间的比例；
缩放和栅格化：浏览器将布局结果绘制到具体设备像素时进行的过程。

因此，“rem 转成 px”只是 CSS 单位计算的口语说法，不代表浏览器一定会把结果舍入为整数。

3. CSS 中的小数像素如何参与布局

现代浏览器通常会在布局计算中保留小数 CSS 像素。例如：

.container {
  width: 131.25px;
}

.item {
  width: 65.625px;
  float: left;
}

两个 .item 的几何宽度之和是 131.25px。布局引擎可以继续使用这个小数值计算位置和尺寸，最后在绘制阶段再将边缘映射到设备像素。

“显示器由一个个像素组成，所以小于 1px 的部分无法处理”的说法过于绝对。浏览器可以处理小数 CSS 像素，只是最终绘制到离散设备像素时，边缘可能出现：

抗锯齿；
边缘落在不同设备像素上的视觉差异；
文字或边框看起来略粗或略细；
不同 DPR 下的截图结果不同。

这里讨论的是亚像素布局（fractional pixel layout）和设备像素栅格化，不要与传统文字渲染中的 RGB 子像素抗锯齿完全混为一谈。

4. 不同浏览器会不会采用不同的小数精度？

历史上，不同浏览器引擎和不同版本的内部布局数据结构确实可能存在差异。例如某些实现曾经使用固定精度的内部单位，另一些实现则使用浮点数或其他表示方式。

但 CSS 标准并没有规定“浏览器必须保留 4 位小数”或“必须保留 15 位小数”。下面这类说法不能作为当前浏览器的通用规则：

浏览器主要有三种处理方式：舍入成整数、保留 4 位小数或保留 15 位小数。

更准确的表述是：

浏览器可能在计算、布局、CSSOM 序列化和绘制等不同阶段采用不同的精度表示。开发者不应依赖某个浏览器内部的小数位数。

CSSOM 中读取到的值也不一定等于内部布局值。例如：

const element = document.querySelector('.item')
const rect = element.getBoundingClientRect()
const style = getComputedStyle(element)

console.log('布局矩形宽度：', rect.width)
console.log('offsetWidth：', element.offsetWidth)
console.log('计算样式宽度：', style.width)

通常：

getBoundingClientRect().width 可以返回带小数的 CSS 像素；
offsetWidth 通常返回经过取整的整数布局尺寸；
getComputedStyle() 返回的是序列化后的计算样式，不应当被当作所有内部计算细节。

5. 关于历史测试和“相邻元素补偿”假设

淘宝 UED 曾经对小数像素布局做过测试。原文提出了一个有价值的历史假设：

浏览器在渲染时做的舍入处理可能只作用于元素的绘制尺寸，而元素真实参与布局的空间仍然保留原始的小数尺寸。

原文使用 65.625px 作为示例，并按照当时观察到的结果推导：

第一个色块宽度为 65.625px，如果绘制结果按近似规则显示为 66px，视觉上会出现约 0.375px 的差异；
第二个色块的位置和可见边界可能受到前一个色块布局几何的影响；
后续色块的绘制边缘可能继续出现小数累积或分配差异；
某些色块看起来像是多占或少占了部分设备像素；
最终截图中可能出现与整数四舍五入不同的视觉结果。

这个推导可以帮助理解“布局尺寸”和“绘制尺寸”并不完全相同，但不能把它当作 CSS 规范或所有浏览器的固定算法。尤其不能据此断言浏览器会按元素顺序把误差逐个补偿给相邻元素。

要验证某个具体问题，至少应该提供：

完整的 HTML 和 CSS；
浏览器名称和版本；
操作系统、缩放比例和 devicePixelRatio；
元素的 getBoundingClientRect() 结果；
是否存在边框、内边距、间距和滚动条；
是否使用了 transform、浏览器缩放或系统显示缩放。

6. `LayoutUnit` 和亚像素布局资料

WebKit 的 LayoutUnit 资料可以帮助理解浏览器引擎如何在内部表示布局尺寸：

LayoutUnit - WebKit

不过，LayoutUnit 是特定浏览器引擎的实现细节，不代表 Chromium、Firefox 或所有版本浏览器的共同规范。它适合作为源码和历史实现参考，不应作为业务代码的依赖依据。

还可以参考：

其中，传统的 Subpixel rendering 更多涉及文字抗锯齿和颜色子像素；阅读时应将它与 CSS 布局阶段的小数尺寸区分开。

7. 先排查盒模型，而不是直接归因于 `rem`

在排查两个子元素换行时，先确认实际占用宽度：

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
}

.item {
  width: 50%;
  padding: 0 1rem;
  border: 1px solid #f00;
}

如果没有 border-box，两个 50% 子元素的内容宽度之外还会叠加内边距和边框，实际总宽度可能超过父容器：

实际占用宽度 = width + padding-left + padding-right + border-left + border-right

还应检查：

子元素是否设置了 margin；
是否存在 gap；
父容器是否有内边距；
是否有垂直滚动条占用横向空间；
子元素是否设置了 min-width；
内容是否触发了最小内容宽度；
是否存在浏览器缩放或系统显示缩放。

8. 解决方案

8.1 优先使用 Flexbox

现代布局中，通常不需要使用浮动来排列并排子元素：

<div class="flex-container">
  <div class="flex-item">左侧</div>
  <div class="flex-item">右侧</div>
</div>

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
}

flex: 1 1 0 让 Flexbox 根据剩余空间分配宽度，通常比手动把多个 rem 宽度相加更稳妥。min-width: 0 可以避免长内容的默认最小内容宽度阻止收缩。

如果需要间距，可以使用：

.flex-container {
  display: flex;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 0;
}

使用 gap 后，子元素不能简单都设置为 50%，因为间距还要占用空间。Flexbox 会根据可用空间分配剩余宽度。

8.2 使用 Grid

对于明确的列布局，Grid 通常更直观：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

minmax(0, 1fr) 可以避免网格项目的最小内容宽度造成意外溢出。

8.3 使用 `table` 和 `table-cell`（兼容旧项目）

原文提到的方案是将父元素设置为 table，子元素设置为 table-cell：

.table-container {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.table-item {
  display: table-cell;
  width: 50%;
  box-sizing: border-box;
}

这种方式在旧项目中可能有效，但它会引入表格布局算法，不应因为“不会换行”就把所有布局都改成表格。Flexbox 和 Grid 通常更适合表达真正的布局意图。

8.4 必须使用 `float` 时

如果因为兼容旧浏览器或维护历史代码必须使用浮动，可以先保证盒模型和总宽度正确：

.float-container {
  width: 100%;
}

.float-container::after {
  display: table;
  clear: both;
  content: '';
}

.float-item {
  float: left;
  width: 50%;
  box-sizing: border-box;
}

如果边框、内边距或间距使总宽度超过父容器，需要重新计算宽度。不要把 width: calc(50% - 0.01px) 当作通用修复方案，它只能掩盖具体的盒模型或尺寸问题。

8.5 使用百分比或容器单位表达布局宽度

rem 更适合表达与根字体大小相关的尺寸，例如字体、间距和组件内尺寸。对于需要跟随父容器变化的列宽，通常优先使用 %、fr、Flexbox 或容器查询：

.card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

也可以使用现代响应式函数：

.title {
  font-size: clamp(1.25rem, 2vw, 2rem);
}

8.6 `vw` 不是万能替代方案

vw 表示视口宽度的百分比：

1vw = 视口宽度的 1%

它适合某些视口相关的尺寸，但仍然可能产生小数 CSS 像素，而且 100vw 在存在滚动条时可能比内容区域更宽。因此，不能简单认为“用 vw 就不会出现精度问题”。

如果尺寸应该跟随父容器，应优先考虑 %、fr 或容器查询，而不是直接使用 vw。

9. 调试小数布局的步骤

查看真实布局尺寸

const element = document.querySelector('.item')
const rect = element.getBoundingClientRect()

console.table({
  rectWidth: rect.width,
  rectLeft: rect.left,
  offsetWidth: element.offsetWidth,
  computedWidth: getComputedStyle(element).width,
  devicePixelRatio: window.devicePixelRatio
})

重点区分：

getBoundingClientRect()：通常可以观察到小数 CSS 像素；
offsetWidth：通常返回取整后的布局尺寸；
getComputedStyle()：返回序列化后的计算样式；
devicePixelRatio：影响 CSS 像素到设备像素的映射。

检查盒模型

在 DevTools 的 Computed 或 Layout 面板中检查：

content、padding、border、margin 的实际值；
box-sizing；
min-width 和 max-width；
gap；
是否存在滚动条；
父元素的实际宽度，而不是只看 CSS 声明的宽度。

检查浏览器缩放和系统缩放

浏览器缩放、系统显示缩放和设备像素比都会影响最终绘制效果。测试布局问题时，应记录测试环境，不要只记录窗口 CSS 宽度。

10. 结论

浏览器通常不会把 rem 计算结果简单地舍入为整数 px 后再进行全部布局。现代布局引擎会在布局阶段保留一定的亚像素几何信息，最后再将结果绘制到设备像素上。

当两个子元素看起来因为小数尺寸而无法同排时，不要直接断定是 rem 的精度错误。应优先检查：

父容器的真实可用宽度；
box-sizing、边框和内边距；
margin、gap 和滚动条；
浮动放置规则；
min-width 和内容最小宽度；
浏览器缩放、系统缩放和设备像素比。

对于新项目，优先使用 Flexbox 或 Grid；对于旧项目，可以使用 table-cell 或经过正确清除的浮动布局；对于字体和间距，继续使用 rem；对于容器宽度，优先选择 %、fr、Flexbox 或 Grid。

真正可靠的解决方式不是强行把所有值改成整数，而是让布局规则正确表达内容之间的空间关系，并使用实际测试数据定位问题。

浏览器将 rem 转成 px 时有精度误差怎么办？