html - CSS 列数下降被截断，流入下一列

Question

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

Notice the far right column, above "Slovenia"

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

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

Answer 1

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

Chrome is reported to incorrectly calculate the container height, and often breaks on margins, padding, and can display 1px of the next column at the bottom of the previous column. Part of these issues can be solved by adding -webkit-perspective:1; to the column container. This creates a new stacking context for the container, and apparently causes chrome to (re)calculate column layout.