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

Answer 1

You can target the browsers individually by using css hacks like this:

@-moz-document url-prefix() {
  //firefox specific css here
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  //chrome specific css here - this will also hit other webkit browsers like safari tho
}

A nicer way however in my opinion involves a tiny bit of javascript that detects the browser and sets a class on the html element and then you can use that class as a base for targeting the individual browsers.

in the end it would look something like this:

...


.firefox .rulename {
  //firefox specific css here
}

and of course the same for chrome and whatever else browser