Chrome ne respectant pas la taille de police rem sur l'étiquette du corps?
Que j'ai prises à l'aide de rem
's à la taille des polices dans les projets récents, puis à l'aide px comme une solution de repli pour les anciennes versions d'IE.
J'ai aussi été un font-size
de 62,5% sur lehtml
afin que je puisse plus facilement définir des tailles de police plus tard dans la feuille de style, j'ai ensuite définir une taille de police de 1.4rem
sur le corps de sorte que non stylé éléments ont 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, Chrome semble gérer cela d'une manière étrange ... Chrome semble définir la taille de la police correctement sur le premier chargement de la page, mais sur les actualisations de la taille de la police sont bien plus grands que ce qu'ils devraient être.
VOIR TRIPOTER (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, vous pourriez avoir besoin de frapper exécuté une fois ou deux fois dans Chrome pour voir dit de l'effet.
Quelqu'un sait quelle en est la cause ou si il y a un moyen de contourner cela? Suis-je en train de commettre un crime par la mise à 62,5% font-size
sur le html
élément (je me rends compte il y a des arguments contre le faire)?
source d'informationauteur Sean
Vous devez vous connecter pour publier un commentaire.
Essayer:
Semble le mieux sur l'actualisation de la page 🙂
VIOLON
La solution la plus simple que j'ai trouvé est tout simplement modifier la définition du corps à
Parce que c'est le corps, vous n'avez pas à vous soucier de compoundage – rems partout ailleurs.
La
*
sélecteur est très lente, comme l'auteur de ce bug dans Chrome, je vous conseille une solution de contournement jusqu'à ce que le bug est corrigé:À condition que vous ayez toujours un wrapper div de toute façon 😉
Ce qui semble être un Chrome bug; voir Question 319623: problème de Rendu lors de l'utilisation d' % + REMs en CSSet/ou une partie fusionnée double: Question 320754: taille de police n'hérite pas si html a une taille de police en pourcentage, et le corps en rem
Oui, c'est un bogue connu dans google Chrome, qui a été lié déjà.
J'ai trouvé
semble fonctionner pour moi.
La façon dont je résoudre ce problème est de configuration absolue de la taille de police dans le corps de l'élément. Pour toutes les autres polices-je utiliser rem:
La réponse de Patrick est droit.
Nous avons le même problème sur Android 4.4.3 WebView.
Avant:
Après:
Avec em et pas remça marche!!!