html - 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 元素，如填充/边距，在这种情况下停止这样做)。

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 及以下版本中正确呈现。