Chrome中column-count属性的异常渲染问题排查与解决

嘿，这个情况我之前碰到过，咱们来拆解一下：

问题根源 #

这确实是Chrome的渲染Bug，不是你的写法错误。当使用column-count实现多列布局时，Chrome对于设置了display: inline-block的子元素，在计算列容器的高度时会出现偏差，导致列块后方多出不必要的空白间距。而Firefox的多列布局实现更贴合CSS规范，所以没有这个异常。

另外补充一句：你用display: inline-block来防止单个段落被拆分到两列，其实这不是最适合的做法——这个属性的设计初衷不是用来控制多列布局的元素拆分，反而会触发Chrome的这个bug。

可行的解决办法 #

方案1：用规范属性替代inline-block（推荐） #

使用break-inside: avoid（兼容性更好）或者break-inside: avoid-column，这是CSS专门用来防止元素在多列布局中被拆分的属性，既符合语义，又能完美解决你的需求，同时避开Chrome的bug。

修改后的CSS代码：

.container { padding: 20px; max-width: 1024px; }
.columns { margin: 0; column-count: 2; column-gap: 20px; }
p { margin: 0 0 1em; line-height: 1.5; break-inside: avoid; }

方案2：保留inline-block的前提下修复Bug #

如果你因为某些原因必须保留display: inline-block，可以给列容器添加以下属性之一来修正Chrome的渲染异常：

• 添加overflow: hidden
• 设置display: inline-block; width: 100%;
• 或者添加column-fill: auto

示例代码（以overflow: hidden为例）：

.container { padding: 20px; max-width: 1024px; }
.columns { margin: 0; column-count: 2; column-gap: 20px; overflow: hidden; }
p { margin: 0 0 1em; line-height: 1.5; display: inline-block; }

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