CSS column-count 和 Chrome 错误：如何避免溢出内容被裁剪

Question

当使用 column-count 时，似乎会裁剪任何溢出内容。

#columns {
  -webkit-column-count: 1;
  -webkit-column-gap: 10px;
  /*-webkit-column-fill: auto;*/
  -moz-column-count: 1;
  -moz-column-gap: 10px;
  /*-moz-column-fill: auto;*/
  column-count: 1;
  column-gap: 10px;
  /*column-fill: auto;*/
  border: 1px solid red;
  overflow: visible;
}
.pin {
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
}

<div id="columns">

  <div class="pin">

    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="#.jpg" />
    </a>
    <h3>Product 1</h3>
    </a>
  </div>

</div>

结果：

有什么办法可以解决这个问题吗？

编辑 1：

这似乎是 Chrome. 中的一个 bug

虽然在 Firefox 上没问题：

编辑 2：

span.onsale {
    min-height: 3.236em;
    min-width: 3.236em;
    padding: .202em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
    top: -.5em;
    left: -.5em;
    margin: 0;
    border-radius: 100%;
    background-color: $highlight;
    color: $highlightext;
    font-size: .857em;
    -webkit-font-smoothing: antialiased;
}

Answer 1

只需在#columns 中使用填充 class

Answer 2

~~我不确定你是如何设计你的 .onsale 所以我按照我自己的方式设计。~~

如果在.pin中使用position:relative然后position:absolute就可以达到你想要的效果。

更新： 问题是 Chrome 中的 webkit-column-count:1 并且由于与 1 有相同或没有任何相同之处，只需删除它并使用另一种技术，通过使用 position:absolute

可以让 .onsale 流出

#columns {
 
  border: 1px solid red;
  
}
.pin {
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
  position: relative
}
.onsale {
   min-height: 3.236em;
    min-width: 3.236em;
    padding: .202em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
    top: -.5em;
    left: -.5em;
    margin: 0;
    border-radius: 100%;
    background-color: lightgreen;
    color: white;
    font-size: .857em;
    -webkit-font-smoothing: antialiased;
}

<div id="columns">
  <div class="pin">
    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="//placehold.it/300x300" />
    </a>
    <h3>Product 1</h3>
  </div>
  <div class="pin">
    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="//placehold.it/300x300" />
    </a>
    <h3>Product 2</h3>
  </div>
</div>

Answer 3

将 transform: translateZ(0); 添加到您的 .pin 以启用硬件加速作为解决方法。

Answer 4

我也有解决办法。

这个例子展示了

的用法

transform: translateZ(0);

修复了裁剪问题。它还展示了一种在悬停时使用 z-index 在其他列块上方显示内容的巧妙方法：

https://codepen.io/HaloDesign/pen/zdRoYZ

CSS column-count 和 Chrome 错误：如何避免溢出内容被裁剪

CSS column-count and Chrome bug: how to avoid overflow content being cropped

html

css

column-count