web-dev-qa-db-fra.com

Chrome ne respecte pas la taille de la police sur la balise body

J'ai commencé à utiliser les polices rem pour dimensionner les polices dans les projets récents, puis l'utilisation de px comme solution de secours pour les anciennes versions d'IE.

J'ai également défini un font-size de 62,5% sur la html afin de pouvoir définir plus facilement les tailles de police plus tard dans la feuille de style. J'ai ensuite défini une taille de police de 1.4rem sur le corps afin que les éléments non stylés aient une base font-size d'au moins 14 pixels, voir le code ci-dessous:

html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }

Le problème est que Chrome semble gérer cela d'une manière étrange ... Chrome semble définir correctement les tailles de police lors du chargement initial de la page, mais lors des mises à jour ultérieures, les tailles de police sont bien plus grandes qu'elles ne devraient l'être.

SEE FIDDLE (HTML copié ci-dessous pour référence future)

<!DOCTYPE html>
<html lang="en-GB">
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <p>This is a test, this font should have font-size of 14px.</p> 
        <p>This is a test, this font should have font-size of 14px.</p> 
        <p>This is a test, this font should have font-size of 14px.</p> 
    </body>
</html>

N'oubliez pas que vous devrez peut-être appuyer sur Exécuter une ou deux fois dans Chrome pour voir ledit effet.

Est-ce que quelqu'un sait ce qui le cause ou s'il y a un moyen de le contourner? Est-ce que je commets un crime en plaçant un 62.5% font-size sur l'élément html (je réalise qu'il y a des arguments contre?)

htmlcssgoogle-chrome
13
Sean

Essayer:

html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial;  }

Semble mieux paraître pour rafraîchir la page :)

VIOLON

6
SW4

La solution la plus simple que j’ai trouvée est simplement de changer la définition du corps en

body {
    font-size: 1.4em;
}

Parce que c'est le corps, vous n'avez pas à vous soucier de la composition - utilisez simplement des rem partout ailleurs.

22
randak

Le sélecteur * est très lent, car l'auteur de ce bogue dans Chrome, je vous conseillerais une solution de contournement comme celle-ci jusqu'à ce que le bogue soit corrigé:

body > div {
    font-size: 1.4rem;
}

Pourvu que vous ayez toujours une div.

4
Bran van der Meer

Cela semble être un bug de Chrome; see Issue 319623: Problème de rendu lors de l'utilisation de% + REMs en CSS , et/ou d'un doublon partiellement fusionné: Issue 320754: font-size n'hérite pas si html a une taille de police en pourcentage, et le corps in rem

2
mgkrebbs

Oui, il s'agit d'un bogue connu dans Chrome, déjà lié. 

J'ai trouvé 

html { font-size: 100%; }

semble fonctionner pour moi.

1
cornishninja

Je résous ce problème en définissant une taille de police absolue dans l'élément body. Pour toutes les autres tailles de police que j'utilise rem:

html {
    font-size: 62.5%;
}

body {
    font-size: 14px;
}

.arbitrary-class {
    font-size: 1.6rem; /* Renders at 16px */
}
1
Patrick

La réponse de Patrick est juste. Nous avons le même problème sous Android 4.4.3 WebView.

Avant :

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

Après :

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6em;
}

Avec em et non rem , ça marche!

1
sagix