Chrome浏览器中CSS Columns内容截断问题求助

我之前在项目里也踩过这个一模一样的坑！在Mac版Chrome 66中使用CSS Columns布局时，只要把line-height设得比浏览器默认值小，就会出现前一列底部带下伸部分的字母（比如p、g、y这些）被截断，半截内容“跑到”下一列顶部的异常。而且用系统默认字体的时候还不太明显，换成自定义字体后这个问题会立刻变得扎眼。

问题触发的核心条件 #

• 仅出现在Mac Chrome 66版本
• 使用了CSS Columns布局（通过column-count或column-width实现）
• line-height设置值低于浏览器默认行高（通常默认是1.5左右，设成1.2及以下大概率触发）
• 文本包含带下伸部分的字符，非默认字体下表现更显著

可行的解决方案 #

这里有几个亲测有效的解决办法，你可以根据自己的需求选：

1. 调整line-height到安全阈值

把line-height调高到一个能容纳字体下伸部分的数值，一般1.3及以上就可以避免这个问题。比如：

.columns {
  column-count: 2;
  line-height: 1.3; /* 根据你的字体调整，确保能放下下伸部分 */
}

2. 给列容器添加微小的padding-bottom

给使用Columns布局的容器加一点点底部内边距，让浏览器在计算列高度时多留一点空间给下伸字符，不会被截断。这个办法适合你不想调整line-height的场景：

.columns {
  column-count: 2;
  line-height: 1.1; /* 你需要的小行高 */
  padding-bottom: 2px; /* 刚好给下伸部分留足空间，不会影响整体布局 */
}

3. 强制声明文本元素的垂直对齐方式

虽然默认就是baseline，但有时候强制声明可以修复Chrome的计算bug。给列内的段落、span等文本元素加上：

.columns p {
  vertical-align: baseline;
}

问题根源 #

这其实是Chrome 66在Mac平台上的一个布局计算bug：当line-height小于默认值时，浏览器计算列高度时没有正确考虑字体的下伸部分（descender）的高度，导致这部分内容被列的高度“切掉”，然后错误地被渲染到下一列的顶部。

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