Chrome не учитывает размер шрифта rem на теге body?

Я использовал для использования rem размер шрифтов в последних проектах, а затем использовал px как резерв для более старых версий IE.

Я также установил font-size из 62.5% на html, поэтому я могу более легко установить размер шрифта позже в таблице стилей, затем я устанавливаю размер шрифта 1.4rem на теле, поэтому неэлементные элементы имеют базу font-size не менее 14 пикселей, см. код ниже:

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

Проблема заключается в том, что Chrome, похоже, справляется с этим странным образом... Chrome, похоже, правильно задает размеры шрифтов при загрузке страницы, но при последующих обновлениях размер шрифта намного больше, чем они должны быть.

СМОТРЕТЬ FIDDLE (HTML скопирован ниже для дальнейшего использования)

<!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>

Помните, что вам может понадобиться нажать один или два раза в Chrome, чтобы увидеть эффект.

Кто-нибудь знает, что вызывает это, или есть ли способ его преодоления? Могу ли я совершить преступление, установив 62,5% font-size в элементе html (я понимаю, что есть споры против этого)?

Ответ 1

Try:

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

Кажется лучше выглядеть при обновлении страницы:)

FIDDLE

Ответ 2

Самое легкое решение, которое я нашел, - просто изменить определение тела на

body {
    font-size: 1.4em;
}

Потому что это тело, вам не нужно беспокоиться о компаундировании - просто используйте rems везде.

Ответ 3

Селектор * очень медленный, как автор этой ошибки в Chrome, я бы посоветовал обходной путь вроде этого, пока ошибка не будет исправлена:

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

Если у вас всегда есть обертка div;)

Ответ 4

Кажется, это ошибка Chrome; см. Проблема 319623: проблема рендеринга при использовании% + REM в CSS и/или частично объединенный дубликат: Проблема 320754: размер шрифта не наследуется, если html имеет размер шрифта в процентах, а тело в резерве

Ответ 5

Да, это известная ошибка в Chrome, которая уже связана.

Я нашел

html { font-size: 100%; }

похоже, работает для меня.

Ответ 6

Как я исправим это, установив абсолютный размер шрифта в body-element. Для всех других размеров шрифта я использую rem:

html {
    font-size: 62.5%;
}

body {
    font-size: 14px;
}

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

Ответ 7

Ответ Патрика прав. У нас такая же проблема на Android 4.4.3 WebView.

До

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

После:

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6em;
}

С em, а не rem, он работает!