Question

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

但是，使用Firefox 4的用户已经指出，CSS的某些部分已经破解。在调查之后，看起来Firefox 4上的字体大小比任何其他浏览器都大得多，导致文本被推下并打破了一些布局。

我已经设法解决了大部分问题，但最后一个突出的问题是我有一个文本框浮动到左边有一个跨度，内部有较小的文本，浮动到它的右边。跨度周围有一个边框，与文本框的高度完全对齐。由于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

尝试将字体大小切换为像素，然后查看是否修复了它。如果是，那么除非使用像素值，否则它是您无法控制的用户代理设置。

如果不是，我们需要更多信息。你在FF4.6和其他平台上运行FF4的平台是什么？例如，由于Mac处理字体的方式，Mac上的任何内容都会显得不同。

Answer 2

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

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

Firefox 4字体大小变化

2 个答案: