IE元素宽度到最小内容 [英] IE element width to min-content

问题描述

 < div class =container> 
 ; 
< img id =imagesrc =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浏览器中进行足够优雅的操作。

  .container {
 / *其他风格的东西在这里* / 
宽度：-moz-min -内容; 
 width：-webkit-min-content; 
} 
  

上面的Jsfiddle - 在FF和Chrome中完美地工作。

我的问题：
Internet Explorer没有分钟-content（或我可以找到的等价物），这意味着它是文本而不是决定容器宽度的图像。

是否有类似的优雅方式来实现IE浏览器？

如果不是，我该如何重构html / css以允许cross broser compatibilty具有相同的行为？

解决方案

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

< h1> HTML

 < div id =stupidIE> 
< div class =container> 
< img id =imagesrc =http://dummyimage.com/200alt => 
< span class =text> 
 Cupcake ipsum dolor坐。 
阿美特巧克力胡萝卜蛋糕燕麦蛋糕熊爪羊角面包。 
< / span> 
< / div> 
< / div> 
  

CSS

  .container 
 {
 background-color：#EEEEEE; 
 border：1px solid＃888888; 
填充：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及以下版本中正确显示。

I have the following container holding both an image and a text element.

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

The desired behaviour is that the div should wrap to the width of the image, and therfore keep the text correctly wrapped underneath. This also needs to be flexible as content is dynamic and image width is not known in advance.

You can do this elegantly enough in Firefox and Chrome using 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.

My Problem: Internet Explorer has no min-content (or equivalent that I can find) which means it is the text not the image which determines the containers width.

Is there any similarly elegant way of achieving this in Internet Explorer?

If not how can i restructure the html/css to allow for cross broser compatibilty for the same behaviour?

解决方案

As mentioned by someone else you can use -ms-grid-columns. You just add a div around your content with IE only CSS. To other browsers the CSS is ignored and shouldn't affect your layout (unless you're applying CSS to all div elements like padding/margin in which case stop doing that).

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;
}

Here's the JSFiddle: http://jsfiddle.net/LRYSp/

Tested in Chrome and IE11. But it should work in other browsers. However I don't think it will render correctly in IE9 and below.

这篇关于IE元素宽度到最小内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！