How to get consistent lines between browsers
This question is basically an extension of this question about a problem I had with vertical centering . Finding the answer to this question has caused the need for this question.
Check out this JSFiddle . It sets the container to 60px high.
.container {
background-color: lightgreen;
height: 60px;
max-height: 60px;
line-height: 60px;
font-size: 60px;
}
In Firefox, this is 60px
high in all cases . In Chrome, the text height is actually higher 60px
(sometimes 69px
, sometimes different values).
I can reduce font-size
to 52px
so that it lines up as exactly 60px
tall in Chrome (so I gave me a tall tline 60px
and allowed me to reliably vertically center), but this is not only Chrome specific, but computer specific.
How can I get constant font height?
source to share
Each browser has its own styles that you need to override. Set this at the top of your css to remove all defaults:
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, em, img, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, footer, header, hgroup,
menu, nav, output, section, time {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
And then the style you want after.
source to share
I had similar problems with texts contained in buttons and input fields. If you are using web font services such as Fontsquirrel like me, make sure you check the font optimization option "Vertical scores" to "No adjustment" in expert mode. By default, Fontsquirrel messes up with these things.
source to share