当项目数等于列数时，chrome和safari呈现css列的方式不同

我有一个目录列表，它使用CSS列，但在Chrome和Safari中的行为不同。目录的每个部分都有一个包装器，将列表排列成两列

我有CSS，所以Chrome按照我想要的方式呈现它：

在Safari中，第二列中的第一项有时上面有一个明显的边距

我可以在Safari中通过添加

display:inline块来解决这个问题到列表元素。这会破坏Chrome中的布局，因为只有两个项目的部分会在第一列中列出这两个项目


片段：


ul{
moz列数：2；
-webkit列数：2；
列数：2；
柱间距：2米；
}
李{
-webkit列内部中断：避免；
内部分页符：避免；
破门而入：避免；
宽度：100%；
列表样式类型：无；
填充：10px；
框大小：边框框；
背景色：#90cdc0；
边缘底部：2米；
}

A.

安娜有时会有额外的内容

安雅

B

Bartolo有时会有额外的内容。这些盒子大小不一

比阿特丽兹
本尼迪克托
博金斯
我已经解决了这个问题，至少对于Safari和Chrome来说是这样

由于这仅适用于项目数等于列数的情况，并且该数字已知，因此我可以应用
display:inline block
到
li
，然后在第二个列表也是最后一个列表时覆盖该列表

在我的例子中，解决方案是在CSS中添加：

li {
  display: inline-block; 
}

li:last-child:nth-child(2) {
  display: block;
}

完整CSS：

ul {
  moz-column-count:2;
  -webkit-column-count:2;
  column-count:2;
  column-gap: 2em;
}

li {
  display: inline-block;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width:100%;
  list-style-type:none;
  padding: 1em;
  box-sizing:border-box;
  background-color: #90cdc0;
  margin-bottom: 2em;
}

li:last-child:nth-child(2) {
  display: block;
}

我还发现，该解决方案取决于具有相似高度的元素。我将来可能会避免使用css列。