Alignement vertical Bullet dans Chrome?

Question

J'ai le code HTML suivant:

<ul> 
    <li><span class="overflow">This is some more text</span></li> 
    <li><span class="overflow">This is some more text</span></li> 
    <li><span class="overflow">This is some more text</span></li> 
    <li><span class="overflow">This is some more text</span></li> 
    <li><span class="overflow" style="display: inline-block;">This is some more text This is some more text This is some more text</span><br /><span>This is some more text This is some more text</span></li> 
</ul> 

Accompagné de ce CSS:

ul { list-style-position: outside; list-style-type: circle; width: 150px; } 

.overflow { display: block; height: 40px; overflow: hidden; } 

Pour une raison perculiar, les éléments de liste avec les ne pas de durée overflow: hidden tous les points de balle dans Chrome. Eh bien, tous sauf le dernier, en changeant display: blockdisplay: inline-block en display: inline-block sur la classe overflow css remédie à cela. Cependant, cela vous pose un autre problème car le point de puce est aligné verticalement verticalement.

J'espère vraiment que prend tout son sens ... voici un violon pour illustrer: http://jsfiddle.net/zUxTD/

En conclusion, est-il possible d'aligner verticalement points de balle dans Chrome? Si non, alors quelqu'un a-t-il une idée de la raison pour laquelle les points ne figurent pas sur les autres éléments de la liste (je suppose que c'est un bug quelconque)?

Answer 1

Change:

.overflow { display: block; height: 40px; overflow: hidden; } 

à

.overflow { vertical-align:top; }