CSS 比较 chrome 和 Firefox 的字体大小问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4899792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font-size issues comparing chrome and Firefox
提问by Iberê
I built a site and the problem is, chrome display font-size 1pxbigger than Firefox. I tried several ways to match the font-size, specified it in px, in % set the body to 100% and then the elements to 0.875em. None of those work. It stills display 1 pixel greater in chrome.
我建了一个网站，问题是，chrome 显示font-size 1px比 Firefox 大。我尝试了几种方法来匹配字体大小，以 px 指定它，以 % 将正文设置为 100%，然后将元素设置为0.875em. 这些都不起作用。它仍然以 chrome 显示高 1 像素。
This is the code I'm using for 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;
}
Where the #geral wraps the entire site and there is no other font-size statement on the CSS, the source can be viewed in the link I posted.
#geral 包裹了整个网站并且 CSS 上没有其他字体大小声明，可以在我发布的链接中查看源代码。
I wonder if there is a way to fix that or if I'll have to specify different font-sizes for each browser?
我想知道是否有办法解决这个问题，或者我是否必须为每个浏览器指定不同的字体大小？
采纳答案by Surreal Dreams
I suggest you use a CSS resetlike the one from YUI. It will make your pages muchmore consistent across all browsers, including font rendering. It makes the biggest difference with IE and the other browsers, but it gets rid of all manner of inconsistencies.
我建议您使用类似于 YUI的CSS 重置。它会让你的网页很多更加一致在所有浏览器，包括字体渲染。它与 IE 和其他浏览器的最大区别在于，它消除了各种不一致之处。
回答by JohnK
Fwiw at this date, I myself have just recently learned that good CSS-coding practice is to define absolute font-size only for the HTML or BODY element, and to define all other font-sizes relatively, that is, in terms of this size (i.e., using emor %).
Fwiw 在这一天，我自己最近才知道好的 CSS 编码实践是只为 HTML 或 BODY 元素定义绝对字体大小，而相对地定义所有其他字体大小，也就是说，就这个大小而言（即，使用em或%）。
If you do that, you only need single out webkit browsers (Chrome, Safari) from the others (Gecko, IE, etc.). So, for example, you might have defined in your stylesheet,
如果你这样做，你只需要从其他浏览器（Gecko、IE 等）中挑出 webkit 浏览器（Chrome、Safari）。因此，例如，您可能在样式表中定义了
body {
font-size: 16px;
}
Then at the bottom of the stylesheet, you can include this
然后在样式表的底部，您可以包含这个
@media screen and (-webkit-min-device-pixel-ratio:0) {
Body {
font-size: 20px;
}
}
(See also Chrome conditional comments)
（另请参阅Chrome 条件注释）
This works for me. But one side-effect is to also rescale any non-text elements that are sized relatively, and this may or may not be desirable.
这对我有用。但一个副作用是也重新缩放任何相对大小的非文本元素，这可能是也可能不是可取的。
回答by Ernestas ?aglinskas
<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>
回答by Myles Gray
Works fine here:
在这里工作正常：
Chrome 9.0:
铬 9.0：
Firefox 4.0 beta 10:
火狐 4.0 测试版 10：
回答by anothershrubery
emis scalable and pxis not. Set the font to a defined pxsize and you should be ok. emcan be desirable in certain circumstances, but if you are worried about 1px then you should set strict pixel sizes.
em是可扩展的，但px不是。将字体设置为定义的px大小，你应该没问题。em在某些情况下可能是可取的，但如果您担心 1px，那么您应该设置严格的像素大小。
EDIT: Just reread and I see you have tried setting the height as pixels already. Don't have a clue then as I don't have Chrome installed here to test. :(
编辑：刚刚重读，我看到您已经尝试将高度设置为像素。没有任何线索，因为我没有在此处安装 Chrome 进行测试。:(
回答by Prasanna Kulkarni
if you have web page to print then
如果您有要打印的网页，那么
add css
添加css
<link rel="stylesheet" type="text/css" href="report.css" media="print" />
in css file
在 css 文件中
body {
padding: 3px;
margin: 0.5px;
background-position: center;
color: #000000;
background: #ffffff;
font-family: Arial;
font-size: 13pt;
}
this works for me
这对我有用
回答by aSystemOverload
I too have had this problem and I've decided, where possible to go with font-size: small (or x-small etc). This gives you a basic range of scalable font sizes without having to look for fiddily css or messing around with JS. It works with IE, FF and Chrome.
我也有这个问题，我已经决定，在可能的情况下使用 font-size: small（或 x-small 等）。这为您提供了基本范围的可缩放字体大小，而无需寻找繁琐的 css 或搞乱 JS。它适用于 IE、FF 和 Chrome。
