Problème de mise en page sous Google Chrome

Oui, vous avez bien lu, j'ai un problème qui provient de Google Chrome et pas Internet Explorer.

Bon alors, l'idée du projet est qu'on a une liste de vignettes avec un commentaire en dessous. Elles ressembles donc à ça :

[Image]
commentaire
commentaire 2

J'ai une liste classique (<ul>) avec plein de ces éléments. Cela donne ça en terme de code:

<div id="Listing">
<ul>
	<li><a title='a' href='a'>
		<img src='a'/>
		Ligne 1  a</a>
		Ligne 2 a
	</li>

	<li><a title='b' href='b'>
		<img src='b'/>
		Ligne 1  b</a>
		Ligne 2 b
	</li>
</ul></div>

Bon, vous voyez l'idée. Ces listings peuvent aller jusqu'à 15/20 éléments par listing.
Ce que je souhaite faire, c'est faire en sorte que ces vignettes s'alignent horizontalement dans la page pour occuper la largeur de la page. Sur une résolution full size, ça correspond à 3 vignettes/ligne.
En gros, voilà ce que ça donnerait:
http://img593.imageshack.us/img593/2190/pbxm.png

J'ai réussi à peu près ce que je voulais de cette façon:

#listing{
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing:1px;
}

ul{
	height:auto;
	overflow: hidden;
	top:0px;
	left:0px;
	width: 100%;
	margin:0px auto; 
	position: relative;
	text-align:center
}

li{
	width:300px;/* c'est la taille qu'il me faut pour les vignettes + texte */
	height:220px;/* c'est la taille qu'il me faut pour les vignettes + texte */
	vertical-align:middle;
	display:inline-block;
	overflow: hidden; 
	position: relative;
	text-align:left;	
}

img{
	box-shadow: none;
	margin:0px;
	padding:0px;
}	
a{
	font-weight: bold;
}	

Le problème est que sous Google Chrome, les éléments se placent n'importe comment.
Il est à noter que ce site est responsive et en gros, plus l'écran est petit, moins il y aura d'élément par ligne (2 sur tablette, 1 sur smartphone).
Tout cela se fait parfaitement automatiquement donc ça c'est bon.

Voilà ce que ça donne sur chrome:
http://img812.imageshack.us/img812/8951/uok9.png

Quand je passe sur les vignettes avecl e curseur, elles se mettent correctement, mais avant ça c'est le bordel le plus complet.

Infos utiles:
Chaque vignette fait 284*143 px.
Il y a généralement deux lignes de commentaire en raleway 11 px uppercase qui passe en gras quand on passe sur la vignette ou la première ligne de commentaire (quelques mots)

Voilà. Si vous avez besoin de plus d'infos, demandez moi surtout
Avez vous une solution ? Merci d'avance

Bonjour.

Ça ne résoudra peut-être pas à ton problème, et je n'ai fait que parcourir ton message, mais les listes de défintion sont peut-être plus adaptées à ton projet que de simples listes non ordonnées.

http://www.pompage.net/traduction/listesdefinitions

Les éléments figure et figcaption sont également intéressants, mais il ne peut y avoir qu'un figcaption par figure.

http://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html.

Bonne continuation.

J'ai réglé mon problème. Je n'avais pas défini de taille par défaut sur les éléments images et certaines avec une taille légèrement différente ce qui causait des bugs d'affichage.

Merci quand même de ta réponse.