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

Следующий код отображается правильно в Chrome или IE (изображение шириной 200 пикселей). В Firefox и Opera стиль 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>

[Update]

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

[Update]

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

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();

});

Ответ 1

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

Ответ 2

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

См. этот пример в jsFiddle.

Ответ 3

Я работал, используя width: 100% вместо max-width: 100%.

Ответ 4

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

Ответ 5

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

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

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

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

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

Ответ 6

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

Конечно, это js-зависимый, но в настоящее время он должен быть более чем ОК.

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

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