Safari 中的列计数行为（图片库）

Question

我使用列数创建了这个图片库，它在 Chrome 和大多数其他浏览器中运行良好。但在 Safari 中存在一个奇怪的错误：图像容器从预览列末尾开始，并跨越到下一列的开头。但图像仅位于容器的第二部分。知道如何解决这个问题吗？

摆弄重现的错误

.image-gallery {
    border: 1px solid red;
    margin: 0;
    padding: 0;
    line-height: 0 !important;
    column-count: 4;
    -webkit-column-count: 4;
}

图库是动态创建的，因此我无法使用 Flex 并将图像分组到每列的 div 中。我也不想使用网格，因为并非所有图像都具有相同的长宽比，而且我不希望图像之间的空间不均匀。

Answer 1

简短的答案是添加

.image-item { break-inside: avoid-column; }

。

但我可能会使用列表来简化标记（列表项不应溢出列）。

ul {
  outline: 1px solid red;
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 4;
  column-gap: 1rem;
}

li {
  /* not needed for display: list-item elements
     ... just belts and braces */
  break-inside: avoid-column;
}

li:not(:last-of-type) {
  margin-bottom: 1rem; 
}

a {
  display: block;
  position: relative;   
}

a:hover::after {
  content: attr(title); /* show text from title attribute */
  position: absolute;
  display: block;
  inset: 0;
  padding: 1rem;
  background: #162912c3;
  color: #fff;
}

img {
  display: block;
  width: 100%;
}

<div class="container">
  <ul class="image-gallery">
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/gitter/" title="Gitter">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/Korbfenstergitter-portfolio-1018x1024.jpg" alt="Gitter" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/konstruktionen/" title="Konstruktionen">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/Portfolio_Konstruktionen.jpg" alt="Konstruktionen" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/geschenkartikel/" title="Geschenkartikel">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/geschenkartikel-1-681x1024.jpg" alt="Geschenkartikel" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/wandbilder/" title="Wandbilder">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/wandbilder-4-1024x717.jpg" alt="Wandbilder" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/grabkreuze/" title="Grabkreuze">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/grabsteine-1-681x1024.jpg" alt="Grabkreuze" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/glastisch/" title="Glastisch">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/glastisch-1-1024x681.jpg" alt="Glastisch" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/ausleger/" title="Ausleger">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/ausleger-produkte-1-1024x682.jpg" alt="Ausleger" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/unterstaende/" title="Unterstände">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/velounterstaende-1-1024x681.jpg" alt="Unterstände" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/tore/" title="Tore">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/09-Kopie.jpg" alt="Tore" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/vordaecher-2/" title="Vordächer">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/Portfolio_Vordaecher.jpg" alt="Vordächer" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/gelaender/" title="Geländer">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/kellergelaender-8-1024x681.jpg" alt="Geländer" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/hornussermaterial/" title="Hornussermaterial">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/IMG-20220302-WA0004.jpg" alt="Hornussermaterial" />
      </a>
    </li>
    <li>
      <a href="https://php81.kunstschlosserei-jogi.ch/produkte/sonstiges/" title="Sonstiges">
        <img src="https://php81.kunstschlosserei-jogi.ch/wp-content/uploads/2024/02/sonstiges-2-681x1024.jpg" alt="Sonstiges" />
      </a>
    </li>
  </ul>
</div>