Question

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

出现的图像显示IE / FF（左侧）和右侧的Chrome：

Code rendered in IE/Firefox Code rendered in 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

您可以使用flexbox代替css列。

<强> FIDDLE

NB：目前在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;
}

编辑 :( Updated FIDDLE which includes support for Firefox）

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

嗯，你可以用@supports来做这件事，它允许我们执行功能查询 - 有点像Modernizr，但有CSS。

这里的好处是Firefox supports them。

因此，如果我添加以下代码:(根据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。

Answer 2

这也应该有效：http://codepen.io/anon/pen/fiHCv

（从我的评论中得到你的感受:)）

使用calc（）可以减少块的宽度以使阴影被看到并且返工边距和填充以实现更好的布局

div#column-container {   
    /* Set 2 columns*/
    column-count: 2;
  column-gap:0;
  width:80%;
  margin:auto;
  padding:20px 0;
}

div#column-container div {
    background-color: yellow;
    box-shadow: 0px 0px 15px #000; 

    /* Make sure that yellow div is not split between columns */
    display: inline-block;
  /* leave room for shadow to be drawn */
    width: calc(100% - 30px);
    /* the rest - just to better present the problem */
    height: 70px;
    margin: 20px;    
}

管理边距和填充，因此列的顶部可能位于相同的垂直水平并适合您的网格

Answer 3

以下是Chrome的简单解决方法：对于黄色块，只需更改宽度和边距即可。要显示阴影，您需要确保块周围有一些保证金空间。

width: 80%;
margin: 1em 10%;

http://jsfiddle.net/dPg2n/1/ ---适用于Chrome 31和FireFox 10.0.2。

Answer 4

只是发生在一个似乎更有效的解决方案上。应用转换：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 5

Chrome无法补偿阴影添加的额外宽度。

如果添加“text-align：center;”到div＃column-container，黄色内部div将居中，你现在可以在左边看到阴影。

如果改变不重要的“宽度：100％;”在黄色内部div上“宽度：85％;” （或你选择的宽度）现在整个阴影都有空间。

div#column-container {   
  /* Set 2 columns*/
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;

   /* insignificant - except text-align, which corrects Chrome */
  width: 50%;
  text-align: center;
}

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;

  /* the rest - width was significant for Chrome, you may need to adjust for your real project */
  width: 85%;
  height: 70px;
  margin-top: 0;
  margin-bottom: 20px;    
}

这是jsFiddle.

Answer 6

我认为列数与chrome相矛盾......

试试这个，

div＃column-container {
/ *设置2列* /

 /* insignificant */
width: 50%;

}

div＃column-container div { background-color：黄色;

/* set shadow for yellow elements */
box-shadow: 0px 0px 15px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow:    0px 0px 15px #000;


/* Make sure that yellow div is not split between columns */
display: inline-block;

/* the rest - not significant */
width: 46%;
height: 70px;
margin-top: 0;
margin-bottom: 20px;    
margin-right: 2%;    
float:left;

}

Answer 7

div#column-container {   
    /* Set 2 columns*/
    overflow: hidden;
    padding: 5px;
    display: block;

     /* insignificant */
    width: 50%;
}

div#column-container div {
    background-color: yellow;
    float: left;
    width: 40%;
    margin: 5%;

    /* 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: block;

    /* the rest - not significant */
    height: 70px;
}

这会给你几乎相似的外观。

Fiddle is here。

P.S。根据您的要求自行更改边距和宽度值。

Answer 8

这是与铬有关的相关错误。基本上，似乎chrome并不擅长渲染css columns属性。 https://code.google.com/p/chromium/issues/detail?id=467196

Answer 9

3列布局也有类似的问题。 Chrome削减了阴影，但仅在第2列和第3列的顶部...

阴影切割

保证金解决方法：

Unexpected token < in JSON at position 0
<HEAD><TITLE>Unknown Host</TITLE></HEAD>
<BODY BGCOLOR="white" FGCOLOR="black"><H1>Unknown Host</H1><HR>
<FONT FACE="Helvetica,Arial"><B>
Description: Unable to locate the server named "<em>server</em>" --- the 
server does not have a DNS entry.  Perhaps there is a misspelling in the 
server name, or the server no longer exists.  Double-check the name and try 
again.</B></FONT>
<HR>
<!-- default "Unknown Host" response (504) -->
</BODY>

Answer 10

一个快速的解决方法是用更大的透明 div 包围你的盒子，为阴影留出足够的空间。这解决了这两个问题。

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

div#column-container {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

div#column-container div {
  background-color: yellow;
  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;
  width: 100%;
  height: 70px;
  margin: 0;
}

.outer {
  break-inside: avoid;
  padding-top: 0px;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 20px; 
}

Answer 11

.box {
  break-inside: avoid;
  column-count: 2;
  column-gap: 2rem;
}
.item {
  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);
}

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

11 个答案:

CSS

编辑 :( Updated FIDDLE which includes support for Firefox）