2011-09-21 6 views
12

私はサイトのCSSをプログラミングしていて、Internet Explorer 9が他のブラウザ(Firefox、Chrome、Safari、IE7、IE8)と比べて異なるフォントサイズを表示していることに気づきました。IE9/Firefoxが他のブラウザと比べてフォントサイズが異なるのはなぜですか?

いくつかのRESETSを試してみましたが、pxにフォントを指定していますが、IE9ではまだフォントサイズの違いが表示されています。

私はをpt,inパーセントで使用しようとしましたが、成功しませんでした。

私はフォントを以前に変更しました(Georgia、Times New Roman、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; 
} 
+0

お知らせ赤のストライプ - http://ie.microsoft.com/testdrive/ - これらは、フォントレンダリングの違いによる(およびこれらのブラウザは、バギーに見える赤い背景、によって悪化)されています – c69

+0

doctype.comのようなよりデザイン性の高いサイトでは、CSSよりもフォントのレンダリングに関連しているように見えるので、この質問でうまくいくかもしれません。 – Ishmael

+0

Firefoxのどのバージョンをチェックしていますか?答えは「重要」です。私はFirefoxのレンダリングがIE9にマッチすると期待しています。 – thirtydot

答えて

-2

二つの可能なもの、両方のテストされていない:

  1. が移行XHTML以外にDOCTYPEを変更してみてください。 HTML5のdoctypeがそれをより良くレンダリングするかどうかを確認してください。 <!DOCTYPE html>

  2. font-family: monospace;のみを使用してフォントの問題であるかどうかを確認してください。

EDIT

ものは、あなたが解決策を見つけることができませんを動作しない場合は、条件付きコメントを使用してIE9異なるfont-size提供したいかもしれません。

+0

DOCTYPEとフォントファミリをモノスペースに変更しましたが、問題は続きます。 以前にフォントを変更しました(Georgia、Times New Romam、Verdana)。いくつかは大きく表示され、IE9では小さく表示されます。 PS:IEでズーム設定とテキストサイズを確認しました。それらはそれぞれ100%と中程度です。 ありがとうございます。 – bbastos

+0

Hmm @BrunoBastos ...わからない。上記の私の編集を参照してください。 –

7

IE9はテキストをレンダリングするためにDirectWriteを使用し、他のブラウザは使用しません(Firefox 4以降は除く)。

これは、2つのブラウザ間のテキストのサイズが少し異なる理由です。

テキストを同じサイズにする方法はありません。

この読み:フォントサイズが現在と使用16pxのものであろうbody{font-size:medium; line-height:1em;} を設定してみhttp://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

-1

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

そしてこの、特に「ヒンティングと間隔の違い」セクションをpタグのパーセントは、font-sizeを増減します。 pタグの幅を制限してください。 IE以外のブラウザで

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

注意してください。コードの1行に2つのタイプミスを編集しました。 StackOverflowの答えには、他の人が新たな問題に陥っているものではなく、作業コードが含まれている必要があります。 –

関連する問題