为什么IE9 / Firefox相对于其他浏览器显示不同的字体大小？ [英] Why is IE9/Firefox showing a different font size in relation to other browsers?
问题描述
我编写网站的CSS，并意识到Internet Explorer 9显示与其他浏览器（Firefox，Chrome，Safari，IE7和IE8）不同的字体大小。
我尝试使用一些RESETS，我在 px 中指定字体，但IE9仍然显示字体大小的差异。
我试过在 pt 中使用 font-size
我改变了字体之前（Georgia，Times New Roman，Verdana） 。
我在IE中检查了缩放设置和文本大小。它们分别是100％和中等。
为了说明，我创建了一个简单的HTML和CSS，你可以看到下面的代码。如何解决这个问题？感谢！
问题：
代码：
HTML
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< link rel =stylesheettype =text / csshref =style.css/>
< title>无标题文档< / 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，形式，标签，传说，
表，标题，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显示 - 角色重置* /
文章，旁白，细节，图片，图，
页脚，标题，hgroup， {
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;
}
表{
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; IE9使用 http://en.wikipedia.org/wiki/DirectWrite\">DirectWrite
来渲染文本，而其他浏览器不支持（Firefox 4 +除外）。
这是两个浏览器之间文本大小略有不同的原因。
没有办法使文本大小相同。
阅读： http：// www .basschouten.com / blog1.php / font-rendering-gdi-versus-directwrite
而且，特别提示和间距差异部分： http：//博客。 mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/
I'm programming the CSS of a site, and realized that the Internet Explorer 9 is showing different font size in relation to other browsers (Firefox, Chrome, Safari, IE7 and IE8).
I've tried using some RESETS, and I am specifying the font in px, but IE9 still shows the difference in font size.
I've tried using font-size in pt, in, percentage, but had no success.
I changed the font before (Georgia, Times New Roman, Verdana). Some of them are shown larger, others are smaller in IE9.
I checked the zoom settings and text size in IE. They are 100% and medium respectively.
To illustrate, I created a simple HTML and CSS as you can see the code below. How to solve this problem? Thanks!
The problem:
Code:
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;
}
解决方案 IE9 uses DirectWrite to render text, and other browsers do not (except for Firefox 4+).
That is the reason for the slightly different size of the text between the two browsers.
There is no way to make the text the same size.
Read this: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite
And this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/
这篇关于为什么IE9 / Firefox相对于其他浏览器显示不同的字体大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
