在Chrome中的CSS列中裁剪了阴影 [英] Box-shadow trimmed in CSS columns in Chrome

问题描述

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

I want the block elements inside CSS columns to have box shadow. The following, simplified code renders as expected in IE10 and Firefox 21, but in current Chrome version (28.0.1500.72) shadows near the column sides are trimmed.

存在的图片会导致IE / FF（位于左侧）和Chrome位于右侧：

The images present results in IE/FF (on the left), and Chrome on the right:

（还有一些垂直移动，但不是问题）

(there's also some vertical shift, but it's not an issue)

jsfiddle：
http://jsfiddle.net/buli_pl/KxYRc/1/

Here's the 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的问题？

Am I misusing some of those properties, or this is a Chrome issue? How can it be fixed at the moment?

推荐答案

您可以使用 flexbox ，而不是css列。

You could use flexbox for this instead of css columns.

FIDDLE

FIDDLE

注意： 目前在Firefox中无法使用，因为它仍然不支持 flex-wrap 属性，但根据 caniuse - 这将在版本28中受支持

NB: This currently doesn't work in Firefox because it still doesn't support the flex-wrap property, however according to caniuse - this will be supported in version 28

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

EDIT ：（更新了FIDDLE，其中包含对Firefox的支持）

按@ buli的建议暂时使用-moz-colums-count for Firefox，只要不支持flex-wrap：

EDIT: (Updated FIDDLE which includes support for Firefox)

As per @buli's suggestion to temporarily use the -moz-colums-count for Firefox as long as flex-wrap is not supported:

好吧，你可以使用@supports允许我们执行特征查询 - 类似Modernizr，但使用CSS。

Well, you could do this with the @supports which allows us to perform feature queries - sort of like Modernizr, but with CSS.

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

The good thing here, is that Firefox supports them.

所以如果我添加下面的代码:(根据Pavlo的建议更新） / p>

So if I add the following code: (updated as per Pavlo's suggestion)

@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。

Now, Firefox will use CSS columns, whereas other browsers will use flexbox.

这篇关于在Chrome中的CSS列中裁剪了阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！