IE元素宽度设置为最小内容宽度

Question

IE元素宽度设置为最小内容宽度

16

我有一个容器同时包含图像和文本元素。

<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 - 在FF和Chrome中完美运行。

我的问题： Internet Explorer没有min-content（或我找到的等效项），这意味着文本而不是图像决定容器的宽度。

是否有任何同样优雅的方法可以在Internet Explorer中实现这一点？

如果没有，如何重新构建html/css以实现跨浏览器兼容性，以实现相同的功能？

- user3447980

你需要支持哪些版本的IE浏览器？ - j08691

我想理想情况下都可以 :). 如果有8+的话会非常高兴，但至少也要最新的。 - user3447980

3个回答

3

@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

- user3664916

0

有点儿 jQuery 吗？

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

代码片段

- fnostro

我喜欢它，而且它很有效。如果我找不到一个纯HTML/CSS的解决方案，那么我无法想象有比这更干净的替代方案了。 - user3447980

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stack of Pancakes · Accepted Answer

正如其他人提到的，您可以使用-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及以下版本中无法正确渲染。