3

我在 Chrome 中遇到问题,column-count列底部的列表项的下降部分被截断并出现在下一列的顶部。请看下面这张图片:

请注意“斯洛文尼亚”上方的最右侧列

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

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

4

1 回答 1

1

这是一个已知的问题。请参阅:http ://caniuse.com/#feat=multicolumn

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

于 2017-08-10T00:04:17.257 回答