css - 当元素数等于列数时，chrome 和 safari 以不同方式呈现 css 列

Question

我有一个使用 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>

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

Answer 1

我解决了这个问题，至少是针对 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;
}