Font-size questions de la comparaison de chrome et Firefox

J'ai construit un site et le problème est, chrome affichage font-size 1px plus grand que Firefox. J'ai essayé plusieurs façons pour correspondre à la taille de police, a précisé qu'il en px, en % ensemble du corps à 100% et puis les éléments de 0.875em. Aucun de ces travaux. Il alambics d'affichage de 1 pixel de plus en chrome.

C'est le code que j'utilise pour la police-tailles:

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

Où le #geral encapsule l'ensemble du site et il n'y a pas d'autre font-size déclaration sur le CSS, la source peut être consulté dans le lien que j'ai posté.

Je me demande si il y a un moyen de corriger ça ou si je vais avoir à spécifier les différentes polices pour chaque navigateur?

OriginalL'auteur Iberê | 2011-02-04

  1. 15

    Je vous suggère d'utiliser un CSS reset comme celle de YUI. Il fera de vos pages beaucoup plus cohérente sur tous les navigateurs, y compris le rendu des polices. Il fait la plus grande différence avec IE et les autres navigateurs, mais il se débarrasser de toutes sortes de contradictions.

    Ce qui est essentiel. Tout le monde devrait l'utiliser tout le temps.
    Il va changer votre vie, l'homme. Comme trouver FireBug, l'apprentissage de jQuery, ou de manger des nachos pour la première fois.
    C'est vraiment intéressantes, mais, même après l'ajout de cette css reset, toujours qu'elle s'affiche en plus grand. Je pense que je vais aller avec php useragent pour définir les polices de caractères de la même taille dans chaque navigateur.
    L'URL directe pour le reset CSS est: github.com/yui/yui2/blob/master/src/reset/css/reset.css (je ne sais Pas pourquoi cette réponse a la tique lorsque l'OP commentaire, c'est qu'il ne permet pas de résoudre le problème!)
    C'est essentiel, mais il n'aide pas à la question.

    OriginalL'auteur Surreal Dreams

  2. 9

    Fwiw à cette date, j'ai moi-même récemment appris que la bonne CSS-pratique de codage est la définition absolue de la taille de police que pour le HTML ou de l'élément de CORPS, et de définir toutes les autres polices relativement, c'est, dans les termes de cette taille (c'est à dire, à l'aide de em ou %).

    Si vous faites cela, vous avez seulement besoin de sortir les navigateurs webkit (Chrome, Safari) des autres (Gecko, IE, etc.). Ainsi, par exemple, vous avez défini dans votre feuille de style,

    body {
  font-size: 16px;
}

    Puis au bas de la feuille de style, vous pouvez inclure cette

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

    (Voir aussi Chrome commentaires conditionnels)

    Cela fonctionne pour moi. Mais l'un des effets secondaires est également de redimensionner tout les éléments non textuels qui sont de taille relativement, et cela peut ou peut ne pas être souhaitable.

    OriginalL'auteur JohnK

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

    OriginalL'auteur Ernestas Žaglinskas

  4. 2

    Fonctionne très bien ici:

    Chrome 9.0:
    Font-size questions de la comparaison de chrome et Firefox

    Firefox 4.0 beta 10:
    Font-size questions de la comparaison de chrome et Firefox

    Ouais, je l'ai corrigé maintenant, j'ai utilisé certains js pour détecter chrome et de compenser sur que 1px.
    Vous pouvez poster une réponse à votre propre question et le marquer comme réponse trop...

    OriginalL'auteur Myles Gray

  5. 1

    em est évolutif et px ne l'est pas. Définir la police a défini des px taille et vous devriez être ok. em peut être souhaitable dans certaines circonstances, mais si vous êtes inquiet au sujet de 1px vous devez ensuite définir le strict tailles de pixel.

    EDIT: Viens de relire et je vois que vous avez essayé de réglage de la hauteur en pixels déjà. N'ont pas la moindre idée alors que je n'ai pas Chrome installé ici pour tester. 🙁

    OriginalL'auteur anothershrubery

  6. 1

    si vous avez de la page web à imprimer, puis

    ajouter css 

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

    dans le fichier css

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

    cela fonctionne pour moi

    OriginalL'auteur Prasanna Kulkarni

  7. 0

    J'ai moi aussi eu ce problème et j'ai décidé, si possible pour aller avec font-size: small (ou x-small etc). Cela vous donne une gamme évolutive de tailles de police, sans avoir à chercher fiddily css ou de déconner avec le JS. Il fonctionne avec IE, FF et Chrome.

    OriginalL'auteur aSystemOverload