比较chrome和Firefox的字体大小问题

Question

我构建了一个网站，问题是，Chrome显示font-size 1px比Firefox大。我尝试了几种匹配字体大小的方法，在px中指定它，在％中将body设置为100％，然后将元素设置为0.875em。这些都不起作用。它仍然在chrome中显示1个像素。

这是我用于font-sizes的代码：

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上没有其他font-size语句，则可以在我发布的链接中查看源代码。

我想知道是否有办法解决这个问题，或者我是否必须为每个浏览器指定不同的字体大小？

Answer 1

我建议你使用像YUI那样的CSS reset。它将使您的网页很多在所有浏览器中更加一致，包括字体呈现。它与IE和其他浏览器产生了最大的不同，但它消除了各种不一致的情况。

Answer 2

Fwiw在这个日期，我自己刚刚了解到良好的CSS编码实践是仅为HTML或BODY元素定义绝对字体大小，并相对定义所有其他字体大小，即用语言来定义这个大小（即使用em或%）。

如果你这样做，你只需要从其他人（Gecko，IE等）中单独输出webkit浏览器（Chrome，Safari）。因此，例如，您可能已在样式表中定义了

body {
  font-size: 16px;
}

然后在样式表的底部，您可以包含此

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

（另见Chrome conditional comments）

这对我有用。但是一个副作用是重新调整任何相对大小的非文本元素，这可能是也可能不是。

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>

Answer 4

在这里工作正常：

Chrome 9.0：

Firefox 4.0 beta 10：

Answer 5

em具有可扩展性，px不可扩展。将字体设置为定义的px大小，您应该没问题。 em在某些情况下可能是理想的，但如果你担心1px，那么你应该设置严格的像素大小。

编辑：重新阅读，我发现你已经尝试将高度设置为像素。没有线索，因为我没有在这里安装Chrome进行测试。 ：（

Answer 6

如果您要打印网页

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

这对我有用

Answer 7

我也有这个问题，我已经决定，尽可能使用font-size：small（或x-small等）。这为您提供了一系列可扩展的字体大小，而无需寻找fiddily css或搞乱JS。它适用于IE，FF和Chrome。