Почему Firefox и Opera игнорируют максимальную ширину внутри display: table-cell?

следующий код отображается правильно в Chrome или IE (изображение шириной 200 пикселей). В Firefox и Opera the max-width стиль полностью игнорируется. Почему это происходит и как обойти? Кроме того, какой способ соответствует большинству стандартов?

Примечание

одна из возможных обходных путей для этой конкретной ситуации-установить max-width до 200px. Однако, это довольно надуманный пример. Я ищу стратегию для переменной ширины контейнер.

<!doctype html>
<html>
<head>
    <style>
        div { display: table-cell; padding: 15px; width: 200px; }
        div img { max-width: 100%; }
    </style>
</head>
<body>
    <div>
        <img src="http://farm4.static.flickr.com/3352/4644534211_b9c887b979.jpg" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
            ante, facilisis posuere ligula feugiat ut. Fusce hendrerit vehicula congue.
            at ligula dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            leo metus, aliquam eget convallis eget, molestie at massa.
        </p>
    </div>
</body>
</html>

[обновление]

Как заявил mVChr ниже,w3.org spec утверждает, что max-width не относится к inline элементы. Я пробовал использовать div img { max-width: 100%; display: block; }, но это, кажется, не исправить проблему.

[обновление]

Я до сих пор нет решения этой проблемы. Тем не менее, я использую следующий javascript hack, чтобы исправить мои проблемы. По сути, он воссоздает ситуацию выше и проверяет, если браузер поддерживает max-width внутри display: table-cell. (Использование uri данных предотвращает дополнительный http-запрос. Один ниже - это 3x3 bmp.)

jQuery( function ( $ ) {

    var img = $( "<img style='max-width:100%' src='" +
    "data:image/bmp;base64,Qk1KAAAAAAAAAD4AAAAoAAAAAwAAA" +
    "AMAAAABAAEAAAAAAAwAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP//" +
    "/wAAAAAAwAAAAKAAAAA%3D" +
    "'>" )
    .appendTo(
        $( "<div style='display:table-cell;width:1px;'></div>" )
        .appendTo( "body" )
    );
    $.support.tableCellMaxWidth = img.width() == 1;
    img.parent().remove();

});
9 67
html css css-tables

9 ответов:

The w3.org spec заявляет, что max-width не применяется к встроенным элементам, поэтому вы получите несогласованное поведение в браузерах. Я не уверен в вашем предполагаемом результате, но вы можете достичь его, если вы установите div img { display:block } а затем выровнять img и p теги с поплавками вместо стандартных инлайн.

31

то, что вам нужно сделать, это положить обертку div (тот, с display: table-cell) внутри другого div, который имеет display: tableиtable-layout: fixed. Это заставляет Firefox и Opera уважать max-width правило.

посмотреть этот пример на jsFiddle.

120

Я получил его работу с помощью width: 100% вместо max-width: 100%.

0

ширина установки: 100% исправляет проблему, но оно вводит другое одно. В WordPress вы не хотите устанавливать ширину: 100% для изображения. Что делать, если изображение среднего размера с шириной 300px, что тогда? Я использую классы, чтобы установить ширину до 50% на среднем размере, но что делать, если изображение меньше? Тогда он будет растягиваться. В браузерах webkit он работает с width: auto; max-width: 100%; но так как Firefox, Opera и IE игнорируют это... это огромная проблема.

0

это стало очень запутанной темой...

Max-width не работает на встроенных элементах ни в элементах таблицы-ячейки. Он работает на изображении, если его дисплей настроен на блокировку, но что такое 100%? В макете таблицы содержимое ячейки сдвигает ширину столбца, чтобы разместить все содержимое, насколько это возможно. Таким образом, max-width:100%, внутри ячейки таблицы в большинстве случаев оказывается естественной шириной содержимого.

вот почему установка свойства max-width вашего изображения в пикселях работает:

<style>
    div { display: table-cell; padding: 15px; width: 200px; }
    div img { max-width: 200px; display:block;}
</style>

table-layout: fixed, как предложил Алекс, может работать, если изображение не находится в первой строке таблицы, потому что содержимое первой строки диктует ширину столбцов.

0

для конкретного случая, есть еще один обходной путь, который я случайно нашел в интернете: если вы используете display: table; + display: table-cell; чтобы имитировать два (или более) макета столбцов на отзывчивом сайте, попробуйте вместо этого: дайте боковой панели ширину, скажем, 350px и основную часть контента сайта шириной, например width: calc(100% - 360px); . Это сделало трюк для меня, и бонус был мне нужна фиксированная ширина боковой панели. Я думаю, что это будет работать и с ЭМ тоже.

конечно, это зависит от js, но в настоящее время должно быть больше тогда ладно.

0

вы пробовали добавить свойство position к своему изображению? img {position:relative;}? Он должен соответствовать родительскому элементу.

-1

добавить float: left в div css

-1

У меня была та же проблема. Я решил это, сделав это:

протестировано в Opera и Fi

.classname {
    max-width: 100%;
    width: 100%;
    display: table-cell !important;}
-3