Marge automatique avec élément de bloc dans IE7

J'ai essayé de créer des éléments LI avec float left et une image (comme un "block") à l'intérieur d'eux. Le code fonctionne correctement dans tous les navigateurs, sauf pour IE 7 (et 6), où les LI sont organisés verticalement et non horizontalement. Que dois-je changer pour que le code fonctionne correctement dans IE7? (vous pouvez également trouver le code au http://jsbin.com/ilexa/edit).Marge automatique avec élément de bloc dans IE7

CODE:

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"> 

<style> 
ul { 
    width:700px; 
} 
li { 
    float:left; 
    margin:10px; 
} 
li img { 
    display:block; 
    margin: 0 auto ; 
    width:50px; 
    height:50px; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
</ul> 
</body> 
</html>

Source

2010-12-05 Gidi

Est-il nécessaire d'avoir le <img> comme bloc? L'espacement ne peut-il pas être entièrement géré par le <li>? Une alternative pourrait être de déclarer également <img> comme float: left - ou peut-être même inline-block (voir Block-level elements within display: inline-block).

Source

2010-12-05 09:59:31

@Matrin - J'ai besoin de comme un bloc puisque j'insère plus de choses dans le LI plus tard (je ne l'ai pas inclus dans la source pour le rendre simple). Pourquoi l'attribut "block" devrait-il causer ce problème? (Gidi) – Joel

Je suppose que IE suit la disposition de bloc "standard" de permettre un bloc par ligne, malgré qu'il soit enveloppé dans un flotteur. Essayez de mettre 'float' sur l'image elle-même et gardez-le bloquer - est-ce que cela aide? –

Marge automatique avec élément de bloc dans IE7

Répondre

Questions connexes