CSS 分栏符 <figcaption>

Question

我有一个 article，只有很少的内容与 figure 标签中带有标题的图像配对。 article 有 2 列声明为 CSS3 列。然而 figcaption 被从 figure 中拉出，试图使列均匀。

CSS

article {
    -webkit-columns: 325px 2;
       -moz-columns: 325px 2;
            columns: 325px 2;
    -webkit-column-gap: 40px;
       -moz-column-gap: 40px;
            column-gap: 40px;
}

figure img {
    width: 100%;
    margin: 0;
}

figure {
    border: 0.5px solid #d7d7d7;
    margin-bottom: 30px;
    margin-left: 4px;
}

figcaption {
    padding: 11px 20px;
    font-family: 'Montserrat';
    font-size: 12px;
    /* IE 8 */
    ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    /* IE 5-7 */
    filter: alpha(opacity=80);
    /* Netscape */
    moz-opacity: 0.8;
    /* Safari 1.x */
    khtml-opacity: 0.8;
    /* Good browsers */
    opacity: 0.8;
    border-top: 0.5px solid #d7d7d7;
    -webkit-box-shadow: 0 1px 5px 2px #d7d7d7;
       -moz-box-shadow: 0 1px 5px 2px #d7d7d7;
            box-shadow: 0 1px 5px 2px #d7d7d7;
}

HTML

<article>
    <figure>
        <img width="574" height="350" src="myimage.jpg">
        <figcaption>CAPTION: ipsum dolor sit amet, consectetur adipiscing elitus Vivamus sed porttitor nisl, vel condimentum.</figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, proin consectetur adipiscing elit vesti bulum feugiat dapibus erat, vel vulputate purus placera.</p>
</article>

研究让我找到 break-inside，指定 break-inside 规则解决了从 figure 中提取 figcaption 的问题，但是 box-shadow留在另一列，更糟。

article figure {
    -webkit-column-break-inside: avoid;
              page-break-inside: avoid;
                   break-inside: avoid;
}

我已经在 Chrome 和 Safari 中确认了这个问题，而 Firefox 完全忽略了 break-inside 规则并给出了第一个屏幕截图的结果，即使 figcaption 是也包含在 break-avoid 规则中。

article 可以有任意数量的段落，当有足够的文本与图像的高度相匹配时，它会正确显示

如何让整个 figcaption 元素留在一列中，cross-browser，包括 box-shadow？还是 CSS3 列太新而无法修复？

Answer 1

通过添加 inline-block 显示属性到 figure

来解决

figure {
    border: 0.5px solid #d7d7d7;
    margin-bottom: 30px;
    margin-left: 4px;
    display: inline-block;
}

这解决了在 Chrome 和 Safari 上落入下一列的阴影，而 IE 和 Firefox 忽略 break-inside 规则，除非做出此声明。

CSS 分栏符 <figcaption>

CSS Columns breaks <figcaption>

html

css

css-multicolumn-layout