IE element width to min-content

Question

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

    

        
                      

              相关标签:
       
      

Answer 1

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.

Answer 2

@Stack_of_Pancakes solution is lacking in that it adds an extra div which is a block element and spans the entire width, whereas the original width:min-content doesn't have this flaw. It can be fixed:

HTML: (intact)

<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

Answer 3

a bit of jquery?

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

FIDDLE