web-dev-qa-db-fra.com

Pourquoi Firefox et Opera ignorent-ils la largeur maximale dans l'affichage: table-cell?

Le code suivant s'affiche correctement dans Chrome ou IE (l'image mesure 200 pixels de large). Dans Firefox et Opera, le style max-width est complètement ignoré. Pourquoi cela se produit-il et y a-t-il un bon travail autour? En outre, de quelle manière la plupart des normes sont-elles conformes?

Remarque

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

<!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>

[Mettre à jour]

Comme indiqué par mVChr ci-dessous, la spécification 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 corriger le problème.

[Mettre à jour]

Je n'ai toujours pas de solution à ce problème. Cependant, j'utilise le hack 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 uri de données empêche la création d'une requête http supplémentaire. Celle ci-dessous est un fichier 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();

});
htmlcsscss-tables
67
brad

La spécification w3.org indique que max-width ne s'applique pas aux éléments en ligne. Vous obtiendrez ainsi un comportement incohérent sur tous les navigateurs. Je ne suis pas sûr du résultat souhaité, mais vous pouvez y parvenir si vous définissez div img { display:block }, puis alignez les balises img et p avec des éléments flottants au lieu de la méthode standard intégrée.

31
mVChr

Ce que vous devez faire est de placer votre div wrapper (celui avec display: table-cell) dans un autre div ayant display: tableettable-layout: fixed. Cela oblige Firefox et Opera à respecter la règle max-width.

Voir cet exemple sur jsFiddle .

120
Alex

Définir la largeur: 100% corrige le problème, mais en introduit un autre. Dans WordPress, vous ne souhaitez pas définir la largeur: 100% pour une image. Que se passe-t-il si l'image est de taille moyenne avec une largeur de 300 pixels? J'utilise des classes pour définir la largeur à 50% sur une taille moyenne, mais que se passe-t-il si l'image est plus petite? Ensuite, il sera étiré. Dans les navigateurs Webkit, cela fonctionne avec width: auto; largeur maximale: 100%; mais comme Firefox, Opera et IE l'ignorent ... c'est un énorme problème.

0
Daniel Dogeanu

Je l'ai obtenu en utilisant width: 100% au lieu de max-width: 100%.

0
Liina

C'est devenu un sujet très déroutant ...

Max-width ne fonctionne pas sur les éléments en ligne ni dans les éléments de tableau ... .. Il fonctionne sur une image si son affichage est défini sur Bloquer, mais quelle est 100%? Dans une présentation de tableau, le contenu d'une cellule pousse la largeur de la colonne pour accueillir tout le contenu possible. So max-width: 100%, à l'intérieur d'une cellule de tableau, finit par être la largeur naturelle du contenu dans la plupart des cas.

C'est pourquoi la définition de la propriété max-width de votre image en pixels fonctionne:

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

table-layout: fixed, comme suggéré par Alex, peut fonctionner si l'image ne se trouve pas dans la première ligne du tableau, car le contenu de la première ligne indique la largeur des colonnes.

0
Hugo Silva

Pour un cas spécifique, il y a une autre solution que j'ai trouvée accidentellement en ligne: si vous utilisez display: table; + display: table-cell; pour imiter une disposition de deux colonnes (ou plus) dans un site responsive, essayez plutôt ceci: donnez à la barre latérale une largeur de, disons, 350px et la partie principale du contenu du site a une largeur telle que width: calc(100% - 360px);. Cela a fait l'affaire pour moi, et le bonus était que j'avais besoin d'une barre latérale à largeur fixe. Je pense que ça va marcher avec eux aussi.

Bien sûr, cela dépend de js, mais de nos jours cela devrait être plus que OK.

0
kufeiko