我有以下容器同时包含图像和文本元素.
<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应该换行到图像的宽度,因此保持文本正确地包裹在下面.这也需要灵活,因为内容是动态的,并且图像宽度不是预先知道的.
您可以使用min-content在Firefox和Chrome中完美地完成此操作.
.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以允许相同行为的交叉更加兼容？
解决方法
正如其他人所提到的,您可以使用-ms-grid-columns.你只需用IE浏览器的内容添加一个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及以下版本中正确呈现.
