开发者

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 the body 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 avoid px but modern browsers handle zooming nicely now that I suspect it is much less of an issue than it was.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜