div{display:table;} doesn't stretch up div to fit image

问题

I've images and captions and I'd like the captions to be no wider than the images. This jsfiddle shows a working example.

The basic trick here is

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

It seems that display:table; causes the div to stretch up to the image width, even though the width was specified as 1px. I'm using this because the image widths vary and may stretch depending on viewport width as well.

So far so good. However, on a local page, the trick is not working. The div really shows up as 1px in width. Oddly, a (seemingly) comparable div does show the proper behavior. I'm not sure how to demonstrate the problem page because it's a local page with quite some html/css and images... I'll be more than delighted to come up with screen shots or (a ton of) css if that may help debugging.

I don't immediately see differences between the functioning and the non functioning divs in the Firefox console. Does anybody have a clue what to look at?

回答1:

There is a solution using CSS3:

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

Fiddle