在Chrome中的CSS列中修剪了框阴影

Question

我希望CSS列中的块元素具有框阴影.以下简化代码在IE10和Firefox 21中按预期呈现,但在当前Chrome版本(28.0.1500.72)中,修剪了列边附近的阴影.

出现的图像结果为IE/FF(左侧),右侧为Chrome:

(也有一些垂直移位,但这不是问题)

这是jsfiddle:http: //jsfiddle.net/buli_pl/KxYRc/1/

div#column-container {
  /* Set 2 columns*/
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
div#column-container div {
  background-color: yellow;
  /* set shadow for yellow elements */
  box-shadow: 0px 1px 3px #000;
  -webkit-box-shadow: 0px 0px 15px #000;
  -moz-box-shadow: 0px 0px 15px #000;
  box-shadow: 0px 0px 15px #000;
  /* Make sure that yellow div is not split between columns */
  display: inline-block;
  width: 100%;
  /* the rest - just to better present the problem */
  height: 70px;
  margin-top: 0;
  margin-bottom: 20px;
}

<div id="column-container">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>
  <div>box 4</div>
  <div>box 5</div>
  <div>box 6</div>
</div>

我是否滥用其中一些属性,或者这是Chrome问题？目前如何修复？

Answer 1

刚刚发生了一个可能更有效的解决方案。应用转换：translateZ（0）; 带有阴影的元素似乎可以解决此问题。在提供的代码中，您可以将其添加到div＃column-container div规则中。

.container{
  break-inside: avoid;
  column-count: 2;
  column-gap: 2rem;
}
.box{
  border-radius: 4px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
  padding: 1rem;
  break-inside: avoid;
  transform: translateZ(0);
}

https://codepen.io/MarkitDigital/pen/RdLoRG

Answer 2

您可以使用flexbox而不是css列.

小提琴

注意:这目前在Firefox中不起作用,因为它仍然不支持该flex-wrap属性,但是根据caniuse - 这将在版本28中得到支持

CSS

div#column-container {   
    height: 270px; /* NB: IE requires the height property. max-height won't work on IE)*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

编辑 :( 更新了FIDDLE,其中包括对Firefox的支持)

根据@ buli建议暂时使用Firefox的-moz-colums-count,只要不支持flex-wrap:

好吧,你可以用@supports来做这个,它允许我们执行功能查询 - 有点像Modernizr,但有CSS.

这里的好处是Firefox支持它们.

所以,如果我添加以下代码:(根据Pavlo的建议更新)

@supports (not (flex-wrap: wrap)) and (-moz-columns: 2) {
    div#column-container { 
        -moz-column-count: 2;
        column-count: 2;
        display: block;
        width: 50%;
    }
}

现在,Firefox将使用CSS列,而其他浏览器将使用flexbox.