Те же значения стиля, тот же элемент, но разные вычисляемые значения в том же браузере

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

У меня есть тег заголовка на веб-странице, которую я анализирую. На вкладке «Стиль» (проверить элемент) на веб-странице указано, что размер шрифта равен 2em, а вычисленное значение — 32 пикселя.

Теперь, когда я загружаю ту же страницу в своем расширении Chrome, вкладка «Стиль» (проверить элемент) в моем расширении говорит, что ее размер шрифта равен 2em, но показывает, что ее вычисленный стиль равен 24px. Чтобы уточнить, я прилагаю изображения стилей и вычисляемых стилей как веб-страницы, так и расширения Chrome.

Случай 1: стиль (веб-страница) Посмотрите на самую правую сторону, размер шрифта: 2em

Вычисляемый стиль (веб-страница) Вычисляемый размер шрифта = 32px

Случай 2: стиль (после загрузки в расширение Chrome) Style: font-size = 2em (аналогично тому, что на веб-странице)

Вычисляемый стиль (после загрузки в расширение Chrome)

Я просто хочу знать, почему это происходит? Те же стили (2em), но окно браузера показывает вычисленный размер как 32, а окно расширения (в том же браузере) показывает 24px.


javascript html css computed-style computed-values
person Ali Baig    schedule 18.01.2015    source источник
comment
em — это относительная единица, основанная на (в данном случае) размере шрифта родительского элемента. Таким образом, простой и логичный вывод здесь заключается в том, что разные значения, которые вы получаете для того, что 2em на самом деле есть, заключаются в том, что размеры шрифта родительских элементов в обоих случаях различаются… Обратите внимание, как на первом снимке экрана для ваше расширение, в разделе «унаследовано от тела» написано font-size: 75% вместо body, а 24 — это ровно 75% от 32.   -  person CBroe    schedule 18.01.2015
comment
О, да, я вижу это сейчас!! Как, черт возьми, у тела 75% размера шрифта. В любом случае хороший момент @cbroe .. Когда я просматриваю страницу расширения .html, там ничего подобного (75%) не найдено.   -  person Ali Baig    schedule 18.01.2015
comment
Как ясно видно, это значение исходит из таблицы стилей пользователя (таблица стилей по умолчанию, применяемая браузером, если вы не указали собственную таблицу стилей пользователя)…   -  person CBroe    schedule 18.01.2015
comment
Установка «размера шрифта: 100%» вручную на html-странице расширения помогает!!! Интересно, почему размер тела по умолчанию не равен 100%. Спасибо   -  person Ali Baig    schedule 18.01.2015

Ответы (1)


arrow_upward
1
arrow_downward

Проблема заключается в том, что em является относительной единицей в CSS, а это означает, что элемент, чей размер шрифта находится в ems, будет основывать размер шрифта на размере шрифта своего родителя. Во втором примере кажется, что размер шрифта body был изменен на 75%, который вам нужно изменить на 100%. Закулисный расчет, который здесь происходит, заключается в том, что размер шрифта по умолчанию для html составляет 16 пикселей, 75% от этого — 12 пикселей, а удвоенный (2em) — 24 пикселя — вычисленный размер шрифта.

person rioc0719    schedule 18.01.2015