Les puces ne sont pas centrées verticalement dans Chrome/Safari

Question

Dans Chrome et Safari, j'ai trouvé que les disques bullet sont assis 1px en étant centrés verticalement (oui, c'est seulement 1px mais ce pixel est important pour mon équipe de conception). Est-il possible de corriger cela sans modifier le code HTML, en remplaçant les puces par des images ou en les créant avec des éléments psuedo?

note: puisque le texte est 9px haut et que la puce est 4 il finira toujours soit 1px trop haut ou bas, mon problème est que c'est un pixel supplémentaire en dessous.

ul { 
font-family: 'Helvetica Neue', helvetica, arial, sans-serif; 
font-size: 12px; 
line-height: 18px; 
} 

http://jsfiddle.net/pixeloco/VWnXr/

Answer 1

est une solution ici. Sans toucher le code HTML, vous pouvez insérer bullet via css avec :before.

li:before { 
    content: ''; 
    background-color: #ccc; 
    display: inline-block; 
    position: relative; 
    height: 6px; 
    width: 6px; 
    border-radius: 6px; 
    margin-right: 4px; 
    top: -1px; 
} 

http://jsfiddle.net/VWnXr/6/

mais techniquement sans solution de contournement son not possible