CSS元素宽度百分比舍入：现代浏览器任意缩放时的表现确认

问题描述 #

假设容器内有三个宽度设为33.3%的div元素，代码如下：

div.container { width: 100%; height: 100px; }
div.inner { width: 33.3%; height: 100px; float: left; }

<div class="container">
  <div class="inner" style="background-color:red;"></div>
  <div class="inner" style="background-color:yellow;"></div>
  <div class="inner" style="background-color:black;"></div>
</div>
请问在Firefox、Chrome、Opera等现代浏览器中，无论用户进行何种缩放操作，是否可以断言该布局表现符合预期？

答案：不能完全保证布局始终符合预期 #

其实这个问题的核心在于浏览器的像素渲染精度限制，咱们拆开来具体说：

• 从数值上看，33.3% × 3 = 99.9%，理论上三个div的总宽度没占满容器，应该能并排显示。但实际渲染时，浏览器会把百分比换算成具体的物理像素，当容器宽度不是整数像素或者缩放比例非100%时，33.3%的计算结果会出现小数像素。
• 现代浏览器虽然支持亚像素渲染，但面对小数像素的取舍，不同场景下的处理逻辑可能有差异。比如容器宽度为101px时，33.3%约等于33.63px，部分浏览器会向上取整为34px，三个加起来就是102px，超过容器宽度，第三个div就会被挤到下一行。
• 用户缩放页面时，容器的实际渲染宽度会动态变化，这种情况下小数像素的累加误差更容易触发换行问题，极端缩放比例下很容易出现布局错位。

如果想确保三个div始终稳定并排，更可靠的方案有这些：

• 使用Flexbox布局：给容器添加display: flex，内部div设置flex: 1，浏览器会自动分配剩余空间，彻底避免宽度计算误差。
• 把宽度设为33.3333%，尽可能逼近1/3的精确比例，能大幅降低误差概率，但仍无法覆盖所有极端场景。
• 使用CSS Grid布局：容器设置display: grid; grid-template-columns: repeat(3, 1fr)，这是目前最稳定的等分布局方案之一。

内容的提问来源于stack exchange，提问作者user5182503