HTML5：如何将两张图片并排放置，然后在下面加上一个figcaption？

Question

我喜欢使用以下清洁标记：

<figure>
    <img src="foo.png" alt=""/>
    <img src="bar.png" alt=""/>
    <figcaption>Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas venenatis lectus nec ligula faucibus tincidunt</figcaption>
</figure>

1. 我喜欢并排展示这两张照片。
2. figcaption应该不比两张图片并排宽。
3. 我不想在CSS或HTML中使用任何特定于图像的宽度值。

我尝试使用以下CSS解决问题，这在Firefox中运行良好：

figure { display: table; }
figcaption { 
display: table-caption; 
caption-side: bottom ;
}
img { display: table-cell; }

我在Chrome（macOS）和Safari（iOS）中测试了CSS。它不起作用。

我看了http://caniuse.com/#search=table-cell但没有成功。

是否有适用于大多数平台/浏览器的解决方案？

还有另外一个目标，我不会隐瞒： 当视口并排小于两张图片的宽度时，演示文稿应该从一个并排切换到另一个的顶部。

但首先：如果有针对主要目标的解决方案，我会很高兴。

感谢。抱歉我的英语很差。

Answer 1

以下是此问题的解决方案。

您可以使用

img { display: inline-table; }

而不是

img { display: table-cell; }