div {display：table;}不会拉伸div以适合图像

Question

我有图像和字幕，我希望字幕不比图像宽。 This jsfiddle显示了一个工作示例。

这里的基本技巧是

div.img{
overflow:hidden;
width:1px;
display:table;
}

似乎display:table;导致div伸展到图像宽度，即使宽度指定为1px。我正在使用它，因为图像宽度不同，并且可能会根据视口宽度拉伸。

到目前为止一切顺利。但是，在本地页面上，诀窍不起作用。 div的宽度确实显示为1px。奇怪的是，（似乎）可比的div 确实显示了正确的行为。我不确定如何演示问题页面，因为它是一个带有相当一些html / css和图像的本地页面......如果可能的话，我会非常高兴能够提出屏幕截图或（大量）css帮助调试。

我没有立即看到Firefox控制台中正常运行和不正常运行div之间的差异。有人知道该看什么吗？

Answer 1

有一个使用CSS3的解决方案：

div.img {
    width: -moz-min-content;
    width: -webkit-min-content;
    width: min-content;
}

Fiddle

related link