Почему Firefox и Opera игнорируют max-width внутри display: table-cell? - PullRequest
Новая
       14

Почему Firefox и Opera игнорируют max-width внутри display: table-cell?

67 голосов
/ 27 мая 2010

Следующий код отображается правильно в 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>

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

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

* * Тысяча двадцать-одина [Обновление] * * тысяча двадцать-дв

У меня до сих пор нет решения этой проблемы. Тем не менее, я использую следующий взлом JavaScript, чтобы исправить мои проблемы. По сути, он воссоздает описанную выше ситуацию и проверяет, поддерживает ли браузер 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 ]

120 голосов
/ 03 июля 2012

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

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

31 голосов
/ 27 мая 2010

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

0 голосов
/ 13 мая 2015

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

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

0 голосов
/ 10 декабря 2014

У меня была такая же проблема. Я решил это следующим образом:

Проверено в Opera и Fi 

.classname {
    max-width: 100%;
    width: 100%;
    display: table-cell !important;}
0 голосов
/ 19 марта 2014

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

Максимальная ширина не работает ни для встроенных элементов, ни для элементов ячейки таблицы. Он работает на изображении, если его отображение настроено на блокировку, но что такое 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 голосов
/ 22 июня 2013

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

0 голосов
/ 24 января 2013

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

0 голосов
/ 08 июня 2010

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

0 голосов
/ 04 июня 2010

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

...