break-inside CSS 属性无法处理 box-shadow

Question

我试图使用列属性将一些列表项对齐到列中。这些列正确对齐了我的元素，但是每个元素的阴影都被破坏了。一列第一个元素的阴影上部滞后于上一列。

请参考下图和this codepen进行演示。

代码如下：

HTML:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS:

li {
  width: 50px;
  height: 70px;
  text-align: center;
  display: block;
  background-color: tomato;
  padding: 10px;
  line-height: 70px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  box-shadow: 0px 0px 9px 4px #CCC;
  -webkit-box-shadow: 0px 0px 9px 4px #CCC;
  -moz-box-shadow: 0px 0px 9px 4px #CCC;
}

ul {
  margin: 40px;
  -webkit-column-count: 4;
  -webkit-column-gap: 25px;
  column-count: 4;
  column-gap: 25px;
  width: 300px;
}

我想知道是否有办法解决这个问题。我可以使用 flex 或任何其他网格技术，但对于我的目的而言，这是最合适和方便的方法。我想知道是什么导致了这个问题，是否可以解决。如果这个问题已经在这个网站上讨论过了，请提供一个link。 TIA

编辑：这似乎适用于 mozilla，这个问题可以在 chrome.

中看到

Answer 1

你可以试试这个

li {
  width: 50px;
  height: 70px;
  text-align: center;
  display: block;
  background-color: tomato;
  padding: 10px;
  line-height: 70px;
  box-shadow: 0px 0px 9px 4px #CCC;
  -webkit-box-shadow: 0px 0px 9px 4px #CCC;
  -moz-box-shadow: 0px 0px 9px 4px #CCC;
  margin:10px;
  float:left;
}

ul {
  margin: 40px;
  width: 300px;
}

Answer 2

对于 Chrome，您需要添加一些边距以包括足够的 space 以显示阴影，以避免看到它破损并避免盒子破损，您需要，这时候，要用display:inline-block;

/* Added*/

li {
  margin: 5px 0;
  display: inline-block;
}
/* End added*/

li {
  width: 50px;
  height: 70px;
  text-align: center;
  background-color: tomato;
  padding: 10px;
  line-height: 70px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  box-shadow: 0px 0px 9px 4px #CCC;
}
ul {
  margin: 40px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 25px;
  -moz-column-gap: 25px;
  column-gap: 25px;
  width: 300px;/* for 3 col, 375px for 4 cols ;) */
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

此外，如果您计算 4 列，请将大小设置为 375px 左右，或者对于 3 列，300px 应该可以

fork of your pen

3 年后......错误仍然存在。

渲染也可以通过 backface-visibility:hidden;

更好

/* Added*/

li {
  margin: 5px 0;
  display: inline-block;
  backface-visibility:hidden;
}
/* End added*/

li {
  width: 50px;
  height: 70px;
  text-align: center;
  background-color: tomato;
  padding: 10px;
  line-height: 70px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  box-shadow: 0px 0px 9px 4px #CCC;
}
ul {
  margin: 40px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 25px;
  -moz-column-gap: 25px;
  column-gap: 25px;
  width: 300px;/* for 3 col, 375px for 4 cols ;) */
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

break-inside CSS 属性无法处理 box-shadow

The break-inside CSS property is not able to handle box-shadow

css

grid-layout

box-shadow

break-inside CSS 属性 无法处理 box-shadow

The break-inside CSS property is not able to handle box-shadow

css

grid-layout

box-shadow

break-inside CSS 属性无法处理 box-shadow