Firefox 默认字体大小问题

Question

灵活的布局使用 ems 或 % 作为字体大小单位，一种常见的做法是使用 body font-size 为 62.5%

但是 Firefox 的默认字体是 14px，这导致布局比其他默认字体大小为 16px 的人更小

我们不能将正文字体大小固定为 10 像素，以便相对大小适用于每个浏览器。

Answer 1

你在这里说了很多正确的话：

• 传统上，Ems 和百分比是用于“可扩展”布局的单位。

• CSS 中的“级联”包括浏览器自己的样式表。因此，每当您省略某个元素的样式属性时，它都会在级联中进行搜索，并在链的末尾从浏览器的样式表中拾取这些缺失的属性。

• 如果您希望对跨浏览器看起来相同的页面文本进行像素完美的字体处理，您需要自己定义字体大小。在 body 元素上使用 px 应该可以满足您的需求。我不知道为什么这仍然是一个问题。曾几何时，有些人会避免使用px，但现代浏览器现在可以很好地处理缩放，我怀疑这不是问题。

Answer 2

另外，除了@Ray 的回答..

对于此类浏览器不一致，请考虑使用重置样式表。

可以找到一个好的here。和here。

我在这里粘贴代码以供参考。

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;
}