Firefox 默认字体大小问题

Question

灵活的布局使用 em 或 % 作为字体大小单位，常见的做法是使用 body 字体大小为 62.5%

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

我们不能只修复 body font-size 为 10px，以便相对大小适用于每个浏览器。

Answer 1

另外，除了@Ray 的答案之外。

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

可以在此处找到一个好的。以及此处。

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

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

Answer 2

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

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

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

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