chrome и safari по-разному отображают столбцы css, когда количество элементов равно количеству столбцов

У меня есть список каталогов, который использует столбцы CSS, но ведет себя по-разному в Chrome и Safari. В каждом разделе каталога есть оболочка, которая размещает списки в двух столбцах.

У меня есть CSS, поэтому Chrome отображает его так, как я хочу:

Chrome правильно отображает столбцы

В Safari у первого элемента во втором столбце иногда есть видимое поле над ним.

safari отображает второй столбец с видимым полем

Я могу исправить это в Safari, добавив display: inline-block; в элементы списка. Это нарушает макет в Chrome, поскольку в разделах, содержащих только два элемента, оба элемента перечислены в первом столбце.

с исправлением встроенного блока хром не отображает правильно столбцы, содержащие только 2 элемента

Фрагмент:

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>

Можно ли оформить этот каталог из двух столбцов так, чтобы он правильно отображался во всех браузерах?


google-chrome css safari css-multicolumn-layout
person calebtr    schedule 06.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я разобрался с этим, по крайней мере, для Safari vs. Chrome.

Поскольку это применимо только тогда, когда количество элементов равно количеству столбцов, и поскольку это число известно, я могу применить display: inline-block; к li, а затем переопределить это, когда 2-й листинг также является последним листингом.

В моем случае решение - добавить в 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;
}
person calebtr    schedule 08.12.2017
comment
Я также обнаружил, что это решение зависит от элементов, имеющих одинаковую высоту. Скорее всего, я буду избегать столбцов css в будущем. - person calebtr; 08.12.2017