html – IE元素宽度为min-content

我有以下容器同时包含图像和文本元素.

<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应该换行到图像的宽度,因此保持文本正确地包裹在下面.这也需要灵活,因为内容是动态的,并且图像宽度不是预先知道的.@H_301_5@

您可以使用min-content在Firefox和Chrome中完美地完成此操作.@H_301_5@

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

Jsfiddle of above – works perfectly in FF and Chrome.@H_301_5@

我的问题：
Internet Explorer没有最小内容(或我可以找到的等效内容),这意味着文本不是确定容器宽度的图像.@H_301_5@

在Internet Explorer中是否有任何类似的优雅方式实现此目的？@H_301_5@

如果不是,我怎么能重组html / css以允许相同行为的交叉更加兼容？@H_301_5@

解决方法

正如其他人所提到的,您可以使用-ms-grid-columns.你只需用IE浏览器的内容添加一个div.对于其他浏览器,CSS被忽略,不应该影响你的布局(除非你将CSS应用于所有div元素,如填充/边距,在这种情况下停止这样做).

HTML@H_301_5@

<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@H_301_5@

.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/@H_301_5@

在Chrome和IE11中测试过.但它应该适用于其他浏览器.但是我不认为它会在IE9及以下版本中正确呈现.@H_301_5@

html – IE元素宽度为min-content

解决方法

猜你在找的HTML相关文章