在Firefox上没有正确对齐的跨度

Question

I have two spans being not aligned properly on Firefox :

 .foo { padding : 3px 8px; } 

 <span class='foo' style='background-color:blue; font-family: Arial'>FOO</span> <span class='foo' style='background-color: green; font-family: Lato'>BLAH</span> 

It's perfectly fine on all the IE and Chrome browsers, but for some reasons on Firefox, the left span isn't aligned with the right span. It looks like the right span is one px too much towards the bottom.

If I remove the foo class, it's working, but why in the world is firefox not aligning these spans properly ?

Answer 1

Firefox isn't playing well with Lato. Adapting the font-family to match each other (or not using Lato) would solve the problem.