css - div{显示:table;} doesn't stretch up div to fit image

Question

我有图片和标题，我希望标题不比图片宽。 This jsfiddle显示了一个工作示例。

这里的基本技巧是

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

似乎 display:table; 导致 div 拉伸(stretch)到图像宽度，即使宽度被指定为 1px。我使用它是因为图像宽度会有所不同，并且还可能会根据视口(viewport)宽度进行拉伸(stretch)。

到目前为止一切顺利。但是，在本地页面上，该技巧不起作用。 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