Firefox default font size issue
Flexible layouts use ems or % as font-size units a common practice is to use body font-size as 62.5%
But Firefox's default font is 14px which results in smaller layout than others 开发者_StackOverflow社区who have 16px default font size
Can't we fix just body font-size to 10px so that relative sizes works in every browser.
Also, in addition to @Ray's answer..
For browser inconsitencies like these, consider using a reset stylesheet.
A good one can be found here. and here.
I am pasting the code here for sake of reference.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
You are saying a lot of the right things here:
Ems and percents have traditionally been the units to use for "scalable" layouts.
The "cascade" in CSS includes the browser's own style sheet. So whenever you omit a style property for some element, it searches through the cascade and will pick up these missing properties from the browser's style sheet at the end of a chain.
If you want pixel-perfect font handling for page text that looks the same across browsers, you will need to define a font-size yourself. Using
px
on thebody
element should give you what you want. I'm not aware of any reason why this is still an issue. There was a time when some people would avoidpx
but modern browsers handle zooming nicely now that I suspect it is much less of an issue than it was.
精彩评论