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

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

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

在 Safari 中，第二列中的第一项有时在其上方有明显的边距。

我可以通过添加在 Safari 中修复此问题display: inline-block;到列表元素。这破坏了 Chrome 中的布局，因为只有两个项目的部分在第一列中列出了这两个项目。

片段：

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

li {
   -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width:100%;
	list-style-type:none;
	padding:10px;
  box-sizing:border-box;
  background-color: #90cdc0;
  margin-bottom: 2em;
}

<h3>
A
</h3>
<ul>
  <li>Anna<p>Sometimes there is additional content</p></li>
    <li>Anya</li>
</ul>
<h3>
B
</h3>
<ul>
    <li>Bartolo <p>Sometimes there is additional content. The boxes are of variable size.</p></li>
    <li>Beatriz</li>
    <li>Benedicto</li>
  <li>Boggins</li>
</ul>

是否可以设置这个两列目录的样式，使其在所有浏览器中都能正确显示？

我解决了这个问题，至少对于 Safari 和 Chrome 来说是这样。

由于这仅适用于项目数等于列数的情况，并且由于该数字已知，因此我可以应用display: inline-block; to 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;
}