chrome 和 safari 在项目数等于列数时以不同方式呈现 css 列

Question

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

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

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

我可以通过将 display: inline-block; 添加到列表元素来在 Safari 中解决这个问题。这打破了 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，然后在第二个时覆盖它listing也是最后一个listing。

在我的例子中，解决方案是添加到 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;
}

chrome 和 safari 在项目数等于列数时以不同方式呈现 css 列

chrome and safari render css columns differently when number of items equals number of columns

css

safari

google-chrome

css-multicolumn-layout