web-dev-qa-db-ja.com

chromeとFirefoxを比較するフォントサイズの問題

サイトを構築しましたが、問題はchrome display font-size 1px Firefoxよりも大きい。 font-sizeを一致させるいくつかの方法を試し、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に他のfont-sizeステートメントがない場合、ソースは投稿したリンクで表示できます。

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

cssfirefoxgoogle-chromefont-size
27
Iberê

YUIのような CSSリセット を使用することをお勧めします。これにより、ページmuchが、フォントレンダリングを含むすべてのブラウザーでより一貫したものになります。 IEと他のブラウザーとの最大の違いはありますが、あらゆる矛盾を取り除きます。

15
Surreal Dreams

この日、私はちょうど良いCSSコーディングの実践がHTMLまたはBODY要素に対してのみ絶対フォントサイズを定義し、他のすべてのフォントサイズを相対的に、つまりこのサイズに関して定義することであることを最近知りました（つまり、emまたは%）。

その場合、必要なのは他のブラウザ（Gecko、IEなど）のWebkitブラウザ（Chrome、Safari）だけです。したがって、たとえば、スタイルシートで定義した可能性がありますが、

body {
  font-size: 16px;
}

次に、スタイルシートの下部に、これを含めることができます

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

（ Chrome条件付きコメント も参照）

これは私のために働く。しかし、副作用の1つは、相対的にサイズが変更されている非テキスト要素も再スケーリングすることです。これは望ましい場合と望ましくない場合があります。

9
JohnK
<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>
6
Ernestas Žaglinskas

ここでうまくいきます：

Chrome 9.0： enter image description here

Firefox 4.0ベータ10： enter image description here

2
Myles Gray

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

編集：ちょうど読み直して、私はあなたがすでにピクセルとして高さを設定しようとしたことがわかります。 Chromeテスト用にここにインストールされていないので、手がかりはありません。:(

1
anothershrubery

印刷するWebページがある場合

cSSを追加

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

cssファイル内

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

これは私のために働く

1
Prasanna Kulkarni

私もこの問題を抱えており、可能であればfont-size：small（またはx-smallなど）を使用することにしました。これにより、CSSをいじったり、JSをいじったりする必要なく、スケーラブルなフォントサイズの基本的な範囲が提供されます。 IE、FF、Chromeで動作します。

0
aSystemOverload