IE 元素宽度到最小内容

Question

我有以下容器，其中包含一个图像和一个文本元素。

<div class="container">
    <img id="image" src="http://dummyimage.com/200">
    <span class="text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </span>
</div>

理想的行为是 div 应该换行到图像的宽度，并因此保持文本正确包裹在下面。这也需要灵活，因为内容是动态的，并且事先不知道图像宽度。

您可以在 Firefox 和 Chrome 中使用 min-content 优雅地完成此操作。

.container {
    /*Other style stuff up here*/
    width: -moz-min-content;
    width: -webkit-min-content;
}

Jsfiddle of above - works perfectly in FF and Chrome.

我的问题： Internet Explorer 没有最小内容（或我能找到的等价物），这意味着决定容器宽度的是文本而不是图像。

在 Internet Explorer 中是否有任何类似的优雅方式来实现这一点？

如果不是，我如何重组 html/css 以允许跨浏览器兼容相同的行为？

Answer 1

正如其他人所说，您可以使用-ms-grid-columns。您只需使用仅 IE 的 CSS 在您的内容周围添加一个 div。对于其他浏览器，CSS 会被忽略，并且不应影响您的布局（除非您将 CSS 应用于所有 div 元素，如 padding/margin 在这种情况下停止这样做）。

HTML

<div id="stupidIE">
    <div class="container">
        <img id="image" src="http://dummyimage.com/200" alt="">
        <span class="text">
            Cupcake ipsum dolor sit. 
            Amet chocolate carrot cake oat cake bear claw croissant.
        </span>
    </div>
</div>

CSS

.container 
{
    background-color: #EEEEEE;
    border: 1px solid #888888;
    padding: 0.3em;
    width: -moz-min-content;
    width: -webkit-min-content;
}
#stupidIE
{
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

这是 JSFiddle：http://jsfiddle.net/LRYSp/

在 Chrome 和 IE11 中测试。但它应该可以在其他浏览器中使用。但是我认为它不会在 IE9 及以下版本中正确呈现。

Answer 2

@Stack_of_Pancakes 解决方案的不足之处在于它添加了一个额外的 div，它是一个块元素并跨越整个宽度，而原始的 width:min-content 没有这个缺陷。 可以修复：

HTML：（完整）

<div class="container">
    <img id="image" src="http://dummyimage.com/200" alt="">
    <span class="text">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </span>
</div>

CSS：

.container {
    background-color: #EEEEEE;
    border: 1px solid #888888;
    padding: 0.3em;
    width: -moz-min-content;
    width: -webkit-min-content;
    display: -ms-inline-grid;
    -ms-grid-columns: min-content;
}
.container > span:nth-child(2) 
{
    -ms-grid-row:2;
    display:inline-block;
}

http://jsfiddle.net/L28s7txr/6

Answer 3

有点jquery？

$(function() {
    $('.container').width($('img#image').width());
});

FIDDLE