max-width ne fonctionne pas dans mozilla et IE

Question

L'image est mise à l'échelle basée sur la largeur du navigateur uniquement en chrome, mais il ne fonctionne pas dans IE et Mozilla Firefox. pouce img travaille dans tous les navigateurs, mais seulement .play img max-width ne fonctionne pas Voici mon HTML

<div class="contai"> 
     <div> <img src="1.png" style="max-width:100%" /></div> 
     <div class="thumb"> 
     <img src="2.jpg" /> 
       <div class="play"> <img src="videoImagePlay.png" /></div> 
     </div> 
</div> 

CSS

.contai{ 
    width:100%; 
} 
.thumb{ 
    border: 1px solid rgb(226, 226, 226); 
    position:relative; float:left; width:38% 
} 
.thumb img{ 
    max-width:100% 
} 
.play{ 
    position:absolute; top:30%; left:35% 
} 
.play img{ 
    max-width:50% 
} 

Answer 1

jeu classeright : 0

comme ceci

.play{  
    position:absolute; top:30%; left:35%; right:0; 
} 

Démo en direct http://jsfiddle.net/puS7u/

Answer 2

voir ce fiddle. ça peut t'aider.

Answer 3

Cela pourrait aider quelqu'un dans le futur: Si l'image a un parent qui est une table (peu importe la hauteur de l'arbre des nœuds) alors max-width ne fonctionnera pas dans FF ou IE sauf si vous avez un pixel spécifique défini largeur maximale sur la table. Cela fonctionne cependant bien dans Chrome.

La logique semble être que FF et IE pensent que les tables devraient toujours se développer en fonction du contenu, sans tenir compte de la largeur maximale: 100%.

Pas évident quel navigateur a la "bonne" ou la meilleure implémentation.