Почему делают Firefox и Opera игнорируют макс. ширину в дисплее: ячейка таблицы?

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

Примечание:

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

    


    

        
        

            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.
        
    

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

Как указано 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 = $( "" )
    .appendTo(
        $( "
" )
        .appendTo( "body" )
    );
    $.support.tableCellMaxWidth = img.width() == 1;
    img.parent().remove();

});