爲什麼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顯示與其他瀏覽器不同的字體大小？

回答

相關問題