Chrome和Firefox字体大小问题比较

Question

我建立了一个网站，问题是Chrome显示的字体大小比Firefox大1像素。我尝试了几种方法来匹配字体大小，指定使用px或%，将body设置为100%，然后将元素设置为0.875em。但这些方法都没有起作用。在Chrome中它仍然比Firefox多显示1个像素。

这是我用于字体大小的代码：

body {
  font-size: 100%;
}
* {
  margin:0;
  padding:0; 
  text-decoration: none; 
  font-family:helvetica, arial, sans-serif;
}
#geral {
  width:1000px; 
  margin:0 auto; 
  position:relative; 
  font-size:0.875em;
}

如果整个网站都被 #geral 包含，CSS 中没有其他字体大小的声明，可以在我发表的链接中查看源代码。

我想知道是否有一种方法来解决这个问题，或者我是否需要为每个浏览器指定不同的字体大小？

- Iberê

---

我发现在Firefox和Chrome之间有不同的边距大小，而不仅仅是字体大小。我总是使用rem单位，以便它们可以随着视口大小进行缩放。 - David Spector

Answer 1

我建议您使用像YUI的CSS重置。它可以使您的页面在所有浏览器中（包括字体呈现）更加一致。它对IE和其他浏览器的影响最大，但它可以消除各种不一致性。

- Surreal Dreams

---

这是必要的。每个人都应该一直使用它。 - Diodeus - James MacFarlane

它会改变你的人生，伙计。就像发现FireBug、学习jQuery或第一次吃玉米片那样。 - Surreal Dreams

这真的很有帮助，但即使添加了CSS重置，它仍然显示得更大。 我想我会使用PHP UserAgent在每个浏览器上设置相同大小的字体。 - Iberê

重置 CSS 的直接链接为：https://github.com/yui/yui2/blob/master/src/reset/css/reset.css（不确定为什么这个答案被标记为解决问题，因为提问者的评论表明它并没有解决问题！） - Darren Cook

这是必要的，但对于问题并没有帮助。 - Vincent Orback

Answer 2

仅供参考，在现在这个日期，我自己最近才学到一种好的CSS编码实践方法，即只针对HTML或BODY元素定义绝对字体大小，并相对于此大小（即使用em或%）定义所有其他字体大小。如果您这样做，只需要单独处理Webkit浏览器（Chrome、Safari）与其他浏览器（Gecko、IE等）。例如，在样式表中可能已经定义了：

body {
  font-size: 16px;
}

然后在样式表的底部，您可以包含这个。

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  Body {
    font-size: 20px;      
    }
}

(另请参阅Chrome条件注释)

这对我有效。但一个副作用是会重新缩放任何相对大小的非文本元素，这可能是需要的，也可能不是。

- JohnK

Answer 3

<script>

     if(navigator.userAgent.indexOf("Chrome") != -1 ) 
    {
         var fontsize = "<style>body{font-size: 125%;}</style>";
    }
    else if(navigator.userAgent.indexOf("Opera") != -1 )
    {
         var fontsize = "<style>body{font-size: 100%;}</style>";
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
         var fontsize = "<style>body{font-size: 100%;}</style>";
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
         var fontsize = "<style>body {font-size: 100%;}</style>";
    }  
    else 
    {
         var fontsize = "<style>body {font-size: 100%;}</style>";
    }
    </script>

<script>document.writeln(fontsize);</script>

- Ernestas Žaglinskas

Answer 4

这里运行良好：

Chrome 9.0:

Firefox 4.0 beta 10:

- Myles Gray

---

是的，我现在已经修复了它，我使用了一些JS来检测Chrome并在那1像素上进行补偿。 - Iberê

Answer 5

如果您需要打印网页，则需要添加CSS。

<link rel="stylesheet" type="text/css" href="report.css" media="print" />

在 CSS 文件中

body {
    padding: 3px;
    margin: 0.5px;
    background-position: center;
    color: #000000;
    background: #ffffff;
    font-family: Arial;
    font-size: 13pt;
}

这对我有效

- Prasanna Kulkarni

Answer 6

em 是可缩放的，px 不是。将字体设置为定义好的 px 大小，你就没问题了。在某些情况下可能会使用em，但如果你担心 1px 的变化，那么你应该设置严格的像素大小。

编辑：我刚刚重新阅读了一遍，我看到你已经尝试将高度设置为像素。如果我没有 Chrome 安装，我就无法测试。 :(

- anothershrubery

Answer 7

我在使用这个 CSS 时，在 Firefox 和 Chrome 之间的渲染相似性已经足够好了（它能够工作是因为 Firefox 还没有实现“缩放”功能）。

body {zoom: .7}

但它仍然无法完全符合像素。

请注意，我在页面的每个地方都使用'rem'单位，而不是'px'单位，因为当我在页面上使用多个字体时，这样做效果更好。

请注意，我已将Windows显示分辨率设置为150%，以弥补我视力不佳的问题。当我将其设置回100%时，不同大小的问题仍然存在。所以这不是问题的原因。

我确信没有任何标准规定页面在不同浏览器上必须看起来一样，但使用'缩放'似乎可以在这方面有所帮助。

除非这个比例因素的问题是由于我计算机的错误配置所致。

- David Spector

Answer 8

我也遇到过这个问题，我决定在可能的情况下使用font-size: small（或x-small等）。这样可以为您提供基本的可缩放字体大小范围，而无需寻找繁琐的CSS或使用JS进行操作。它适用于IE，FF和Chrome。

- aSystemOverload