Почему 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 утверждает, что max-width не применяется к inline элементов. Я пытался использовать div img { max-width: 100%; display: block; }, но, похоже, это не решает проблему.

[Update]

У меня до сих пор нет решения этой проблемы. Тем не менее, я использую следующий взлом 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();

});
67 голосов | спросил brad 27 Maypm10 2010, 22:16:14

9 ответов


0

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

ответил mVChr 27 Maypm10 2010, 22:55:11
0

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

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

ответил Alex 3 J000000Tuesday12 2012, 15:48:12
0

Я получил его, используя width: 100% вместо max-width: 100%

ответил Liina 24 Jpm1000000pmThu, 24 Jan 2013 18:44:57 +040013 2013, 18:44:57
0

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

ответил Daniel Dogeanu 22 J0000006Europe/Moscow 2013, 04:06:10
0

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

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

ответил Hugo Silva 19 MaramWed, 19 Mar 2014 07:06:00 +04002014-03-19T07:06:00+04:0007 2014, 07:06:00
0

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

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

ответил kufeiko 13 Maypm15 2015, 21:53:39
0

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

ответил Brook Julias 8 J0000006Europe/Moscow 2010, 20:57:38
0

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

ответил Zachary Forrest 4 J0000006Europe/Moscow 2010, 00:15:58
0

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

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

.classname {
    max-width: 100%;
    width: 100%;
    display: table-cell !important;}
ответил Zeriz 10 WedEurope/Moscow2014-12-10T13:26:11+03:00Europe/Moscow12bEurope/MoscowWed, 10 Dec 2014 13:26:11 +0300 2014, 13:26:11

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132