CSS 列计数下降被切断，流入下一列答案

【问题标题】：CSS Column Count Descenders Being Cut Off, Flowing Into Next columnCSS 列计数下降被切断，流入下一列
【发布时间】：2017-08-10 08:04:17
【问题描述】：

我在 Chrome 中遇到了column-count 的问题，其中列底部的列表项的下降部分被截断并出现在下一列的顶部。见下图：

最右列顶部的那条小线是斯洛伐克共和国中“p”衬线的结尾。这只是 Chrome 上的一个问题，在 Firefox 中，最后一项实际上是倒数第二列中的“斯洛文尼亚”。更改为不同的衬线字体或无衬线字体也不能解决问题（实际上更明显）。

break-inside: avoid-column; 应用于列表项并不能解决问题，-webkit-column-break-inside: avoid; 也不能。我可能没有将它应用于正确的元素？非 JavaScript 解决方案当然是首选。

【问题讨论】：

【解决方案1】：

这是一个已知问题。见：http://caniuse.com/#feat=multicolumn

Chrome 被报告错误地计算容器高度，并且经常在边距、内边距上中断，并且可以在上一列的底部显示下一列的 1px。这些问题的一部分可以通过将-webkit-perspective:1; 添加到列容器中来解决。这会为容器创建一个新的堆叠上下文，并且显然会导致 chrome （重新）计算列布局。

【讨论】：