font-variant: small-caps; shows different font sizes using Chrome or Firefox

Question

font-variant: small-caps;
font-size: 12px;

Firefox:

• Capital letters: 12px
• Lowercase letters: 10px

Chrome:

• Capital letters: 12px
• Lowercase letters: 8px

How to harmonize that without using JavaScript?

Answer 1

Webkit browsers display small-caps smaller than other browsers so.. You can use CSS media queries to easily sniff out webkit browsers like Chrome and Safari. Try something like this:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
    font-size: .85em 
 }
}