Different line-height in Firefox and Chrome when using text-shadow

Question

For some reason, Firefox and Chrome render line-height differently when using text-shadow.

CSS:

#tracker {
           


        

Answer 1

Specifying the line height in text-relative units will provide consistent behavior across rendering engines.

Simply calculate the container-height to text-height relation:

13 / 9 = 1.444~

... and apply that to the relevant rule in the CSS:

#tracker li {
    line-height: 1.444;
}

Demo on jsFiddle