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

问题

I've got a directory listing that uses CSS columns but behaves differently in Chrome and Safari. Each section of the directory has a wrapper that arranges the listings into two columns.

I've got the CSS so Chrome renders it the way I want:

In Safari, the first item in the second column sometimes has an apparent margin above it.

I can fix this in Safari by adding display: inline-block; to the list elements. This breaks the layout in Chrome, as sections which have only two items list both items in the first column.

Snippet:

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>

Is it possible to style this two-column directory in such away that it displays correctly in all browsers?

回答1:

I sorted this out, at least for Safari vs. Chrome.

Since this only applies when the number of items is equal to the number of columns, and since that number is known, I can apply display: inline-block; to li and then override that when the 2nd listing is also the last listing.

In my case, the solution is to add to the CSS:

li {
  display: inline-block; 
}

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

Full 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;
}

来源：https://stackoverflow.com/questions/47684012/chrome-and-safari-render-css-columns-differently-when-number-of-items-equals-num

标签

css

google-chrome

safari

css-multicolumn-layout