affichage de webkit: inline-block se comporte de façon incohérente

Question

J'ai un span avec plusieurs autres travées à l'intérieur, et je veux basculer les sous-span entre display:block et display:inline. Les travées commencent par display:inline-block, puis passent au display:block. Cela fonctionne bien. Le problème est lorsque vous revenez dans Webkit (ça marche bien dans Firefox): les spans sont rendus avec des sauts de ligne supplémentaires entre eux. Puis-je rendre ce rendu correctement sans mettre les balises <br/> entre les travées?

démo ici: http://jsbin.com/omalu3/4/edit

Answer 1

maintenant est pas amusant.

Je ne suis pas sûr de ce qui cause le problème, mais il disparaît si vous ajoutez float: left; à #a.oneline *. Quand vous faites cela, vous pouvez changer l'affichage pour bloquer afin que vos styles ressemblent à ceci:

#a.multiline * { } 
#a.oneline * { float:left; } 
#a * { border:solid 1px black; display:block;} 

La seule différence entre cette solution et votre mise en page originale est que les blocs oneline seront alignés en haut lieu de la en bas, mais vous pouvez définir une hauteur fixe pour ces éléments.

Answer 2

Toute autre solution serait une solution de contournement puisqu'il s'agit d'un bug de navigateur. Une alternative à la solution de derekerdmann:

#a.multiline * { width: 100% } 
    #a.oneline * { width: auto } 
    #a * { border:solid 1px black; display:inline-block } 

Answer 3

Une autre solution serait de ne pas envelopper les enfants couvre une autre durée - qui est un élément en ligne. Utilisez un <div> pour #a et il se comporte correctement (dans Webkit au moins!). Sur une autre note, le sélecteur d'étoiles n'est pas vraiment efficace, bien que je comprenne que ce n'est qu'un exemple, donc je ne vais pas critiquer cela ici: D