css - Firefox 4 字体大小变化

Question

我最近编写了一个网站，并正常在所有浏览器上进行了测试，以确保浏览器之间的一致性。我已经在 IE 7、IE 8、Chrome 和 Firefox 3.6 上进行了测试。

但是，使用 Firefox 4 的用户向我指出，CSS 的某些部分已损坏。仔细研究之后，Firefox 4 上的字体大小似乎比任何其他浏览器都略大，导致文本被下推并破坏了一些布局。

我已经设法解决了大部分问题，但最后一个悬而未决的问题是我有一个 float 到左侧的文本框，其中有一个跨度，里面有较小的文本， float 到它的右侧。跨度周围有一个边框，并与文本框的高度完全对齐。由于 Firefox 4 中的字体大小差异，文本框显示得比应有的深，这意味着跨度不再在底部对齐。

我环顾四周，看看是否有人遇到过 Firefox 4 显示的文本比其他浏览器大的问题，但没有成功。还有其他人有同样的问题吗？我不喜欢“变通办法”——我宁愿找到一个像样的解决方案来解决这个问题——我一定是在做一些奇怪的事情!

预先感谢您的帮助!

编辑主体代码默认所有字体大小:

body 
{
    font-size: 69.5%;
    font-family: Tahoma, Verdana, Sans-Serif;
    margin: 0;
    padding: 0;
    background: #4997C4 url(/Images/main_bg.gif) repeat-x left top;
}

文本问题区域之一的代码:

.content .banner p.content_text
{
    margin: 5px 0 2px 12px;
    font-size: 1.2em;
    color: #38393C;
    width: 374px;
    line-height: 1.3em;
}

Answer 1

您正在使用相对字体大小(%，em)，因此如果用户在浏览器中指定了不同的默认字体大小，则字体大小页面上的不同。作为解决方案，您可以使用绝对字体大小，例如 px。 (与行高属性相同的问题)

另一个问题可能是 FF 4 中的图形硬件加速(我遇到了一些其他问题)，它对字体渲染有一些影响。