为什么IE9/Firefox显示与其他浏览器不同的字体大小？

我正在编程一个网站的CSS，并意识到Internet Explorer 9显示与其他浏览器（Firefox，Chrome，Safari，IE7和IE8）不同的字体大小。为什么IE9/Firefox显示与其他浏览器不同的字体大小？

我试过使用一些RESETS，我在px中指定了字体，但IE9仍然显示字体大小的差异。

我试过用font-size在pt,in，百分比，但没有成功。

我改变了之前的字体（格鲁吉亚，时代新罗马，Verdana）。其中一些显示较大，另一些在IE9中较小。

我在IE中检查了缩放设置和文字大小。它们分别是100％和中等。

为了说明，我创建了一个简单的HTML和CSS，您可以看到下面的代码。如何解决这个问题呢？谢谢！

问题：

代码：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <title>Untitled Document</title> 
</head> 
<body> 
    <p> 
    AAAAA BBBBB CCCCC DDDDD EEEEE FFFFF GGGGG HHHHH IIIII JJJJJ KKKKK LLLLL MMMMM NNNNNN OOOOO PPPPP QQQQQ 
    </p> 
</body> 
</html>

CSS

/* RESET */ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/* END OF RESET */ 

body { 
    background-image:url(GreenLine.png); 
    background-repeat:no-repeat; 
    font-family:"Courier New", Courier, monospace; 
    font-size:12px; 
}

来源

2011-09-21 bbastos

通知红色条纹 - http://ie.microsoft.com/testdrive/ - 那些通过在字体呈现差异引起的（和由红色背景，这使得加剧这些浏览器看车） – c69

在面向更多设计的网站（如doctype.com）上，您可能会对此问题做得更好，因为它看起来比字体呈现更像CSS。 – Ishmael

您正在检查Firefox的哪个版本？答案是“重要的”。我希望Firefox的渲染符合IE9。 – thirtydot

-2

两种可能的事情，无论是未经测试：

尝试改变的doctype比XHTML过渡以外的东西。查看HTML5文档是否更好地呈现它。 <!DOCTYPE html>
尝试仅使用font-family: monospace;来查看它是否是字体问题。

编辑

如果这些不工作和你不能找到一个解决方案，你可能想成为IE9不同font-size使用条件的意见。

来源

2011-09-21 12:38:19

我将DOCTYPE和字体系列更改为等宽字体，问题仍然存在。我改变了之前的字体（格鲁吉亚，Times New Romam，Verdana）。其中一些显示较大，另一些在IE9中较小。 PS：我在IE中检查了缩放设置和文字大小。它们分别是100％和中等。谢谢。 – bbastos

嗯@BrunoBastos ......不确定。看到我上面的编辑。 –

IE9使用DirectWrite来呈现文字，其他浏览器不会（Firefox 4+除外）。

这就是两个浏览器之间文本大小略有差异的原因。

没有办法使文本的大小相同。

阅读：http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

而这一点，特别的“提示和间距的差异”部分：http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

来源

2011-09-21 13:39:41 thirtydot

-1

尝试设置body{font-size:medium; line-height:1em;} 在字体大小将是16px现在和使用p标记上的百分比来增加或减少font-size。确保限制p标签的宽度。在非IE浏览器

P{max-width:40%; font-size:86%; line-height:1.2em;}

来源

2013-08-01 19:37:39 Durer

保重，我已经在您的代码的一行中编辑了两个拼写错误。一个StackOverflow答案应该包括工作代码，而不是让其他人陷入新的麻烦。 –

为什么IE9/Firefox显示与其他浏览器不同的字体大小？

回答

相关问题