Je me suis codé dans un coin CSS. J'ai une liste d'images que j'affiche l'une à côté de l'autre en utilisant une liste non ordonnée. La liste non ordonnée est placée à l'intérieur d'une div fixe de largeur, de sorte que chaque 3 images, les 3 prochaines images s'affichent sur la "rangée" suivante.Image CSS horizontale dans IE
Chaque li dans la ul n'affiche pas seulement l'image, il affiche toutes sortes de choses, comme ceci:
<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<a href=""><img src="" /></a>
<p>Description</p>
</li>
</ul>
</div>
Cela fonctionne très bien dans la plupart des navigateurs, sauf pour IE7. IE7 affiche les images les unes au-dessous des autres. Je sais par la technique de barre de menu horizontale classique que cela peut être corrigé en réglant le flotteur à gauche pour le li. Cela ne fonctionne pas pour ma situation, car je ne connais pas la hauteur de chaque li, cela dépend du contenu. Avec des hauteurs différentes pour chaque li, des situations de mise en page très étranges se produisent, par exemple une image assise à droite d'une rangée vide. Voici une version dépouillée de mon CSS:
.imagelist { border-collapse:collapse; font-size:9px; width:850px; }
.imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }
.imagelist li a { display:inline-block; position:relative; }
.imagelist li a img, { padding:0; margin:0; position:relative; }
Fondamentalement, je veux juste IE7 me écouter et respecter la déclaration inline-block, qui devrait afficher des éléments à côté de l'autre.