为什么Firefox不支持包含在pre中的代码标签的CSS字体大小？

Question

我发现浏览器在处理font-size时存在不一致(在Mac OS X 10.11.4上).我想知道这是Firefox中的错误,还是CSS中的错误,还是我不了解CSS？

这个JSFiddle显示了细节.在这样的部分:

<pre>Start of pre section
  <code>**problem here!**</code>
End of pre section
</pre>

样式会code { font-family: Courier; }更改Safari和Chrome显示的字体大小,但不会更改Firefox中的字体大小.然而在其他部分中,code所有浏览器中的元素大小从13px增加到16px.

font-family在所有浏览器中设置后,为什么字体大小从13px增加到16px ？

也许Firefox 正在改变font-family而不是改变font-size.然而,它确实改变字体大小在其他地方,比如在code一个内部p元素或列表内.

我猜测解决方案是在我关心它的地方(忽略可访问性)用像素单位积极设置显式字体大小.

---

引自2006年可能相关的Firefox bug:Bug 328621 - 奇怪的默认monospace字体大小 - 与比例字体不同

虽然这给浏览器带来的浏览器间可移植性问题对我来说似乎并不是那么微不足道.我最后一次想要标记HTML,以便等宽字体部分在Mozilla和M $ IE中显示相同,我不得不求助于绝对字体大小,由于它们所带来的可访问性问题,这当然应该避免.

是的,有一个简单的解决方法 - 更改设置.但大多数用户将使用默认值.:-(

Answer 1

这个问题并不新鲜; 众所周知,浏览器对monospace字体的处理在浏览器中非常棘手且不一致.有许多变通方法可以不要求您覆盖用户设置的等宽字体首选项,其中最令人困惑的是指定

font-family: monospace, monospace;

这是正确的:字体堆栈末尾有两个 monospace关键字.没人知道为什么这样有效; 它只是.

对于它的价值,Firefox的UA样式表包含对-moz-fixed关键字的引用,该关键字引用用户设置的首选项,包括族和大小,尽管它是font-family属性的值.Firefox的首选项设置为13px,无论系统的默认等宽字体是什么.这似乎monospace, monospace迫使浏览器根据规范计算元素的字体大小,同时至少仍保留首选的等宽字体系列.但这只是猜测.

这是一个错误吗？这取决于你问谁.如果你问浏览器供应商,他们可能会说这是故意的.如果你问其他作者,他们可能也会把它称为bug.这是规范违规吗？不,因为规范允许浏览器实现默认值,但他们喜欢.