时间戳

首页 > 解决方案 > 阴影被切断并显示在新列中 - CSS Masonry

html - 阴影被切断并显示在新列中 - CSS Masonry

问题描述

正如问题所述，我正在通过 CSS 创建一个砌体布局，它首先工作得很好。我最近注意到的一件事是，最后一个元素的 box-shadow 触及 grid-wrapper 的最底部被切断并显示在这个 grid-wrapper 的最顶部。我尝试在底部添加填充和边距甚至间距元素，但似乎没有任何效果。

阴影被切断的图像

希望得到帮助！如有遗漏，我会尽快给您补充！

非常可爱的问候

body {background:grey;}

:root {
    --masonry-spacer-index: 1rem;
    --masonry-columns-index: 3;
    --gap:1em;
    --columns:var(--masonry-columns-index);
}

.quote-grid { 
    width:980px;
    display:column;
    columns:var(--columns);
    gap:var(--gap);
    position:relative;
    margin:0 auto;
    background:orange;
}

.quote-grid > quote { 
    break-inside:avoid;
    margin-bottom:var(--gap);
    display:block;
    position:relative;
    transition:all .1s linear;
    background:white;
    padding:24px;
    box-shadow:8px 0 20px black;
}

@supports (grid-template-rows: masonry) {
    .quote-grid {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        grid-template-rows: masonry;
        grid-auto-flow: dense;
        /* align-tracks: stretch; */
    }

    .quote-grid > * {
        margin-bottom: 0em;
    }
}
<div class="quote-grid">

    <quote>/* quote inr */</quote>
    <quote>/* quote inr */</quote>
    <quote>/* quote inr */</quote>
    <quote>/* quote inr */</quote>
    <quote>/* quote inr */</quote>
    <quote>/* quote inr */</quote>

</div>

标签： htmlcss

解决方案

这似乎是 Chrome/Edge 的问题。

在我的 Windows10 笔记本电脑上，Firefox 给出了这个，阴影是正确的： 在此处输入图像描述

然而，在 Chrome/Edge 上，它给出了问题中讨论的问题： 在此处输入图像描述

注意：每个条目底部的阴影比 Chrome 示例中每个条目底部的阴影要细/浅得多。事实上，最后一个条目是唯一正确的！

这似乎与 Chrome（因此也是 Edge）的一个已知问题有关。来自caniuse.com：

Chrome 被报告错误地计算容器高度，并且经常在边距、填充上中断，并且可以在上一列的底部显示下一列的 1px。

caniuse 然后建议：

这些问题的一部分可以通过添加 -webkit-perspective:1 来解决；到列容器。这会为容器创建一个新的堆叠上下文，并且显然会导致 chrome （重新）计算列布局。

但是强制一个新的堆叠上下文——我尝试了几种方法——似乎并没有解决这个问题。

简化所有内容并将阴影放在元素上但没有显示列，使用 inline-block 代替，阴影在每个元素上确实显示正确。显然，如果您要使用此方法，则需要适当注意百分比以获得与在列中显示相同的布局，此代码段仅用于说明：

<style>body {
  background: grey;
}

:root {
  --masonry-spacer-index: 1rem;
  --masonry-columns-index: 3;
  --gap: 1em;
  --columns: var(--masonry-columns-index);
}

.quote-grid {
  width: 980px;
  display: inline-block;
  margin: 0 auto;
  background: orange;
}

.quote-grid>quote {
  break-inside: avoid;
  margin-bottom: var(--gap);
  display: block;
  position: relative;
  transition: all .1s linear;
  background: white;
  padding: 24px;
  box-shadow: 8px 0 20px black;
  display: inline-block;
  width: 25%;
  margin: 1%;
}
<div class="quote-grid">

  <quote>/* quote inr */</quote>
  <quote>/* quote inr */</quote>
  <quote>/* quote inr */</quote>
  <quote>/* quote inr */</quote>
  <quote>/* quote inr */</quote>
  <quote>/* quote inr */</quote>

</div>

推荐阅读