wake-up-neo.net

Probleme mit der Schriftgröße beim Vergleich von Chrome und Firefox

Ich habe eine Website erstellt und das Problem ist, dass Chrome-Display font-size 1px größer ist als Firefox. Ich habe verschiedene Möglichkeiten ausprobiert, um die Schriftgröße anzupassen, in px angegeben, in% den Körper auf 100% und dann die Elemente auf 0.875em gesetzt. Keiner dieser Arbeiten. Es ist immer noch 1 Pixel größer in Chrom.

Dies ist der Code, den ich für Schriftgrößen verwende:

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

Wenn #geral die gesamte Site umschließt und im CSS keine andere Anweisung zur Schriftgröße vorhanden ist, kann die Quelle in dem von mir geposteten Link angezeigt werden.

Ich frage mich, ob es eine Möglichkeit gibt, das Problem zu beheben, oder ob ich für jeden Browser unterschiedliche Schriftgrößen festlegen muss.

27
Iberê

Ich schlage vor, Sie verwenden ein CSS reset wie das von YUI. Dadurch werden Ihre Seiten sehr in allen Browsern konsistenter, einschließlich der Schriftwiedergabe. Es macht den größten Unterschied mit IE und den anderen Browsern, beseitigt jedoch alle Arten von Inkonsistenzen.

14
Surreal Dreams

Zu diesem Zeitpunkt habe ich gerade erst gelernt, dass es eine gute CSS-Kodierungspraxis ist, die absolute Schriftgröße nur für das HTML- oder BODY-Element und alle anderen Schriftgrößen relativ zu definieren, d (dh em oder %). 

In diesem Fall benötigen Sie nur einzelne Webkit-Browser (Chrome, Safari) von den anderen (Gecko, IE usw.). So haben Sie beispielsweise in Ihrem Stylesheet definiert:

body {
  font-size: 16px;
}

Am Ende des Stylesheets können Sie dies einfügen

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

(Siehe auch Bedingte Kommentare zu Chrome )

Das funktioniert für mich. Ein Nebeneffekt besteht jedoch darin, auch Nicht-Text-Elemente mit einer relativen Größe neu zu skalieren. Dies kann erwünscht sein oder auch nicht.

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>

Funktioniert hier gut:

Chrome 9.0: enter image description here

Firefox 4.0 Beta 10: enter image description here

2
Myles Gray

em ist skalierbar und px nicht. Setzen Sie die Schriftart auf eine definierte px-Größe und Sie sollten in Ordnung sein. em kann unter bestimmten Umständen wünschenswert sein, aber wenn Sie sich um 1px Sorgen machen, sollten Sie strikte Pixelgrößen festlegen. 

BEARBEITEN: Nur nochmal lesen, und ich sehe, Sie haben bereits versucht, die Höhe als Pixel festzulegen. Ich habe keine Ahnung, da ich Chrome nicht zum Testen installiert habe. :(

1
anothershrubery

wenn Sie eine zu druckende Webseite haben

add css 

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

in css datei

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

das funktioniert für mich

1

Ich hatte auch dieses Problem und habe mich entschieden, wo möglich die Schriftgröße zu wählen: klein (oder x-klein usw.). Dies gibt Ihnen eine Reihe von skalierbaren Schriftgrößen, ohne dass Sie nach fummeligen Css suchen oder sich mit JS herumschlagen müssen. Es funktioniert mit IE, FF und Chrome.

0
aSystemOverload