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

Question

我建立了一个网站,问题是,chrome显示font-size 1px比Firefox更大.我尝试了几种匹配font-size的方法,在px中指定它,在%中将body设置为100%然后将元素设置为0.875em.这些都不起作用.它仍然在铬中显示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重置.它会让你的网页很多更加一致在所有浏览器,包括字体渲染.它与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条件评论)

这适合我.但是一个副作用是重新缩放任何相对大小的非文本元素,这可能是也可能不是.

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>