Inline-block différence entre Firefox et Chrome

Bonjour à tous,

J'ai un petit soucis avec un positionnement de blocs.

J'ai une zone principale dans laquelle je souhaite positionner plein de petits rectangles (div). Dans chaque rectangle, j'ai une image en float:left plus une ou deux lignes de texte.

J'ai fait un exemple minimaliste.

<div id="cadreJaune">
	<div class="blocTexte">
		<img src="etoile.png"/>
		Div inline-block avec une image en float left et du texte qui prend plusieurs lignes
	</div>
	<div class="blocTexte">Autre div inline-block</div>
</div>

#cadreJaune { 
	width: 650px; height:200px; 
	background-color:yellow; padding:10px; 
}
		
.blocTexte { 
	display:inline-block; width: 300px; height:100px; 
	background-color:white; overflow:hidden; 
}

img { 
	float:left; margin-right:10px; width:100px; height:100px; 
}

Le problème est que le résultat n'est pas le même selon le navigateur:
- Firefox et IE 8/9 donnent le résultat que je souhaite
- Chrome décale vers le bas le deuxième bloc, sauf si il n'y a qu'une ligne de texte dans le premier
- IE7 fait n'importe quoi (il ne gère peut-être pas du tout le inline-block ?)

Voici la page en live: http://www.realdev.fr/test-inline-block/

Si vous avez une piste, merci d'avance...
Modifié par jiber2fr (30 Nov 2011 - 07:44)

Pour IE7, il ne comprend en effet pas inline-block. Pour lui c'est display: inline; et lui donner le hasLayout (et pour ce dernier point, c'est zoom: 1; à moins qu'il y ait déjà un width, height, etc auquel cas c'est inutile).
IE6 a le même comportement qu'IE7 donc autant le cibler en même temps, c'est ni plus cher ni plus long (si les sélecteurs sont compatibles IE6 évidemment sinon tant pis )

Pour ta question principale, au pif fixer un vertical-align à tous les blocs ?
Modifié par Felipe (30 Nov 2011 - 09:23)

Bonjour,

rapidement, IE7 ne comprend pas toujours inline-block.
/* Grillé sur le fil ! */
Pour chrome, il faudrait un exemple en ligne pour pouvoir tester des solutions...

Bon courage !
Modifié par Ten (30 Nov 2011 - 09:23)

Merci pour vos réponses

Pour IE7: j'essayerai ce soir.
Pour Chrome, en effet le problème semble résolu avec un 'vertical-align:top'. Mais je ne comprend pas pourquoi c'est nécessaire. Si je met 'vertical-align:baseline' (valeur par défaut en principe), le résultat est comme si je n'avais rien mis. Qui a raison ? Firefox ou Chrome ?

@Ten: il y a un exemple en ligne

Oooops désolé !

Si un vertical-align:top; résout le problème, je suppose que Chrome gère le inline-block de manière manichéenne : il considère les éléments comme du texte à suivre ( inline ) mais ajoute un "bête" saut de ligne entre les deux ( block ) afin de se rassurer en disant qu'il a bien tout fait .

D'ailleurs, le problème d'alignement est corrigé si on applique un

line-height:0;

Par contre il faudrait le préciser à nouveau à l'intérieur, je suppose..

Mais ce serait intéressant d'avoir une explication officielle !

Ten a écrit :
je suppose que Chrome gère le inline-block de manière manichéenne : il considère les éléments comme du texte à suivre ( inline ) mais ajoute un "bête" saut de ligne entre les deux ( block )

En fait le décalage vertical opéré par Chrome dépend du contenu du inline-block précédent (il faut qu'il y ait une image ET du texte sur plusieurs lignes). Si j'enlève l'image ou le texte, il n'y a pas de décalage.


Bon, j'ai résolu le problème pour IE avec

<!--[if lte IE 7]>
	<style type="text/css">
		.blocTexte { display:inline; zoom:1; }
	</style>
<![endif]-->

(Avec ça il reste une différence sous IE7, c'est que les deux blocs sont collés; les autres navigateurs laissent un espace, qui est dû au retour à la ligne dans mon code. En gros si je veux que ce soit pareil partout, il faut que je colle tout le code dans mon fichier HTML, et que j'ajoute un espace avec une marge; j'ai pas testé mais ça doit marcher).

Et pour Chrome avec

vertical-align:top;

J'ai mis à jour l'exemple en ligne si jamais quelqu'un veut jouer avec

Merci
Modifié par jiber2fr (30 Nov 2011 - 13:10)