クロムとFirefoxのフォントサイズの問題

Question

サイトを構築しましたが、Firefoxよりもクロムディスプレイfont-size 1pxが大きいです。私は、フォントサイズを一致させるためにいくつかの方法を試してみました。pxで指定しました。本体を100％に設定し、次に要素を0.875emに設定しました。それらの仕事のどれも。それでもクロムに1ピクセル大きな値が表示されます。

これは私がフォント・サイズのために使用しているコードです：

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; 
} 

#geralは、サイト全体をラップし、CSS上の他のフォントサイズの文が存在しない場合は、ソースを表示することができます私が投稿したリンクに。

これを修正する方法があるのだろうか、ブラウザごとに異なるフォントサイズを指定する必要があるのだろうか？

Answer 1

私はそれはIEや他のブラウザとの最も大きな違いになります。これは、フォントレンダリングを含むすべてのブラウザ、全体であなたのページがはるかに一貫性のあるようになります。あなたはYUIからのもののようCSS resetを使用することをお勧め、それ矛盾のすべての方法を取り除く

Answer 2

emはスケーラブルであり、pxではありません。フォントを定義されたpxのサイズに設定してください。大丈夫です。特定の状況ではemが望ましいかもしれませんが、1ピクセルが心配な場合は、厳密なピクセルサイズを設定する必要があります。

EDIT：もう一度読み直してください。すでにピクセルとして高さを設定しようとしています。テストするためにここにChromeをインストールしていないため、ヒントはありません。 :(

Answer 3

はここに罰金作品：。

クローム9.0：

のFirefox 4.0ベータ10：

Answer 4

私もこの問題を抱えていましたが、可能な限りフォントサイズ：小（または小規模なものなど）で行くことを決めました。これは、CSSを見たり、迷惑をかけることなく、スケーラブルなフォントサイズの基本的な範囲を提供します。 IE、FF、Chromeで動作します。 CSSファイルで使用すると、Webページを持っている場合は、CSS

<link rel="stylesheet" type="text/css" href="report.css" media="print" /> 

を追加し

を印刷する

Answer 5

body { 
    padding: 3px; 
    margin: 0.5px; 
    background-position: center; 
    color: #000000; 
    background: #ffffff; 
    font-family: Arial; 
    font-size: 13pt; 
} 

これが私のために、この日の

Answer 6

FWIWを動作しますが、私自身ちょうど最近、良いCSSコーディングの練習は、HTMLまたはBODのために絶対的なフォントサイズを定義することであることを知った他のすべてのフォントサイズを相対的に、すなわちこのサイズに関して定義する（すなわち、emまたは%を使用して）。

これを実行すると、他のもの（Gecko、IEなど）からWebkitブラウザ（Chrome、Safari）を1つだけ選択するだけで済みます。したがって、たとえば、あなたのスタイルシートで定義されている場合があります、

body { 
    font-size: 16px; 
} 

次にスタイルシートの一番下に、あなたはこの

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    Body { 
    font-size: 20px;  
    } 
} 

を含めることができます（また、Chrome conditional commentsを参照）

これは動作します私のために。しかし、1つの副作用は、相対的にサイズが設定された非テキスト要素を再スケーリングすることであり、これは望ましいかもしれません。

Answer 7

<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>