Inconsistent font sizes cross browser with both px and em
3.5em: http://jsfiddle.net/yst9h/
html, body {
font-family:Arial, Helvetica, Sans-Serif;
}
.loadingText {
font-weight:bold;
font-variant:small-caps;
font-size:3.5em;
}
56px: http://jsfiddle.net/yst9h/1/
...
font-size:56px;
...
I've got an element with a bar below it, and some Loading text like so. on
Chrome the text fits neatly above the bar, which is sized to 100% of the
parent it and the loading text share ( 200px width ). On Firefox and IE,
however, the font is much larger(!) sending it past the bar and looking
misaligned as a result. All of the browser's dev tools report that the
fonts are the correct size ( when they are obviously not to the human eye
), and none of the browsers have any zoom level set ( tested different
zoom levels as well, no change in the scaling difference )
This has me extremely stumped, I've been through SO and google many times
over reading all of the related font inconsistency issues looking for
something I've missed, and have yet to come across this one again.
Is this something I can fix simply, or will I have to wrangle with
per-browser css rules to lower the font size?