视口像素数为奇数时出现白线的布局问题求助

问题分析 #

你遇到的是Chromium内核（Chrome）和IE浏览器在处理百分比宽度布局时的亚像素渲染bug：当视口宽度为奇数时，50%宽度的列会被计算出带小数的像素值，浏览器为对齐像素网格会生成留白（白线），而Firefox的亚像素渲染逻辑更完善，因此没有出现该问题。实际站点中白线范围更广，本质也是同一类渲染精度问题，解决示例中的场景即可覆盖全局情况。

可行解决方案 #

以下几种方案可尝试解决该问题：

• 图片微缩放/位移：给图片添加transform: scale(1.001)，让图片轻微放大覆盖白线；或用transform: translate(-0.5px, -0.5px)微调位置，配合容器overflow: hidden避免溢出。
• 容器背景色匹配：若图片边缘颜色统一，给列容器设置相同背景色，用背景遮盖白线，视觉上实现无缝。
• 整数宽度替代百分比：通过媒体查询在不同视口下设置固定整数宽度，规避亚像素计算。
• 组合消除行间距：将图片设为display: block，同时给容器设置font-size: 0、line-height: 0，结合其他方案强化效果。

临时方案优化建议 #

如果你的临时方案是通过元素重叠实现无缝，可优化为给图片添加margin: -1px，同时给容器设置overflow: hidden，既不影响整体布局，又能精准覆盖白线，比单纯缩放更可控。

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