Pourquoi Firefox et Opera ignorent-ils max-width à l'intérieur de display: table-cell?

Question

Le code suivant s'affiche correctement dans Chrome ou IE (l'image fait 200px de large). Dans Firefox et Opera, le style max-width est complètement ignoré. Pourquoi cela se produit-il et y a-t-il une bonne solution de contournement ? De plus, quelle méthode est la plus conforme aux normes ?

Remarque

Une solution possible pour cette situation particulière est de définir max-width à 200px. Cependant, il s'agit d'un exemple plutôt artificiel. Je cherche une stratégie pour un conteneur de largeur variable.

        div { display: table-cell; padding: 15px; width: 200px; }
        div img { max-width: 100%; }

            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.

[Mise à jour]

Comme l'a indiqué mVChr ci-dessous, la spécification du w3.org indique que max-width ne s'applique pas aux éléments inline. J'ai essayé d'utiliser div img { max-width: 100%; display: block; }, mais cela ne semble pas résoudre le problème.

[Mise à jour]

Je n'ai toujours pas de solution pour ce problème. Cependant, j'utilise le piratage JavaScript suivant pour résoudre mes problèmes. Essentiellement, il recrée la situation ci-dessus et vérifie si le navigateur prend en charge max-width dans display: table-cell. (L'utilisation d'un data uri évite une requête http supplémentaire. Celui ci-dessous est un bmp 3x3.)

jQuery( function ( $ ) {

    var img = $( "" )
    .appendTo(
        $( "" )
        .appendTo( "body" )
    );
    $.support.tableCellMaxWidth = img.width() == 1;
    img.parent().remove();

});

Answer 1

Ce que vous devez faire est de mettre votre div enveloppante (celle avec display: table-cell) à l'intérieur d'une autre div qui a display: table et table-layout: fixed. Cela fait en sorte que Firefox et Opera respectent tous deux la règle max-width.

Voir cet exemple sur jsFiddle.

Answer 2

La specification de w3.org indique que la largeur maximale (max-width) ne s'applique pas aux éléments en ligne, donc vous obtiendrez un comportement incohérent entre les navigateurs. Je ne suis pas sûr de vos objectifs, mais vous pouvez les atteindre en définissant div img { display:block } puis en alignant les balises img et p avec des flottants au lieu de l'alignement en ligne standard.

Answer 3

J'ai réussi à le faire fonctionner en utilisant width: 100% au lieu de max-width: 100%.

Answer 4

Ajoutez float: left au css de la div

Answer 5

Avez-vous essayé d'ajouter une propriété de position à votre image? img {position:relative;}? Cela devrait être conforme à l'élément parent.