Ширина элемента IE до минимального содержимого

У меня есть следующий контейнер, содержащий как изображение, так и текстовый элемент.

<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 не имеет минимального содержимого (или эквивалента, которое я могу найти), что означает, что текст не является изображением, определяющим ширину контейнеров.

Есть ли такой же элегантный способ достижения этого в Internet Explorer?

Если нет, то как я могу реструктурировать html/css, чтобы обеспечить совместимость с кросс-броузером для такого же поведения?

Ответ 1

Как упоминалось кем-то другим, вы можете использовать -ms-grid-columns. Вы просто добавляете div вокруг своего контента только с IE CSS. В других браузерах CSS игнорируется и не должен влиять на ваш макет (если вы не применяете CSS ко всем элементам div, таким как padding/margin, в этом случае перестаете делать это).

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 и ниже.

Ответ 2

В приведенном выше решении отсутствует то, что он добавляет дополнительный div, который является блочным элементом и охватывает всю ширину, тогда как исходная ширина: 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/

Ответ 3

немного jquery?

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

FIDDLE