web-dev-qa-db-fra.com

Problèmes de taille de police comparant chrome et Firefox

J'ai construit un site et le problème est, chrome display font-size 1px plus gros que Firefox. J'ai essayé plusieurs façons de faire correspondre la taille de la police, je l'ai spécifié dans px, dans% définissez le corps sur 100%, puis les éléments sur 0.875em. Aucun de ceux qui travaillent. Il affiche toujours 1 pixel plus grand en chrome.

C'est le code que j'utilise pour les tailles de police:

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

Lorsque le #geral englobe tout le site et qu'il n'y a pas d'autre déclaration de taille de police sur le CSS, le source peut être consulté dans le lien que j'ai posté.

Je me demande s’il existe un moyen de résoudre ce problème ou si je devrai spécifier des tailles de police différentes pour chaque navigateur?

cssfirefoxgoogle-chromefont-size
27
Iberê

Je vous suggère d'utiliser un CSS reset comme celui de YUI. Cela rendra vos pages beaucoup plus cohérentes sur tous les navigateurs, y compris le rendu des polices. Cela fait la plus grande différence avec IE et les autres navigateurs, mais il élimine toutes les incohérences.

14
Surreal Dreams

À ce jour, moi-même, je viens d’apprendre récemment que la bonne pratique en matière de codage CSS consiste à définir la taille de police absolue uniquement pour l’élément HTML ou BODY, et à définir toutes les autres tailles de police de manière relative, c’est-à-dire en termes de taille. (ie, en utilisant em ou %). 

Si vous faites cela, vous n’avez besoin que de navigateurs Webkit uniques (Chrome, Safari) parmi les autres (Gecko, IE, etc.). Ainsi, par exemple, vous pourriez avoir défini dans votre feuille de style,

body {
  font-size: 16px;
}

Ensuite, au bas de la feuille de style, vous pouvez inclure ceci

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

(Voir aussi Commentaires conditionnels de Chrome )

Cela fonctionne pour moi. Mais l'un des effets secondaires est de redimensionner également les éléments non textuels dont la taille est relative, ce qui peut être souhaitable ou non.

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>
7
Ernestas Žaglinskas

Fonctionne bien ici:

Chrome 9.0: enter image description here

Firefox 4.0 beta 10: enter image description here

2
Myles Gray

em est évolutif et px ne l’est pas. Définissez la police sur une taille px définie et tout devrait bien se passer. em peut être souhaitable dans certaines circonstances, mais si vous êtes inquiet pour 1px, vous devez définir des tailles de pixels strictes. 

EDIT: Il suffit de relire et je vois que vous avez déjà essayé de définir la hauteur en pixels. Vous n'avez pas la moindre idée alors que Chrome n'est pas installé ici pour tester. :(

1
anothershrubery

si vous avez une page Web à imprimer alors

ajouter css 

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

en fichier css

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

ça marche pour moi

1
Prasanna Kulkarni

Moi aussi j'ai eu ce problème et j'ai décidé, dans la mesure du possible, d’utiliser la taille de police: petite (ou très petite, etc.). Cela vous donne une gamme de base de tailles de polices évolutives sans avoir à chercher des CSS fastidieux ou à jouer avec JS. Cela fonctionne avec IE, FF et Chrome.

0
aSystemOverload