Размер шрифта всегда большой в iframe (em)

Im делает простой веб-сайт для размещения в iframe другого сайта. По какой-то причине, когда содержимое помещается в iframe, размер шрифта всегда большой.Размер шрифта всегда большой в iframe (em)

Слева вы можете увидеть, что он помещен в iframe, справа он загружен без iframe.

enter image description here

У меня было:

body { 
    font-size: 8px; 
}

, а также: (где я предпочел этот)

body { 
    font-size: 62.5%; 
}

и использовали em на других классов, чтобы они шкале в соответствии с Font- размер для тела. Но в iframe это не работает.

Это то, что я вижу в инспекторе:

enter image description here

В вычисленная это 32 пикселей. Это, вероятно, 16px по умолчанию 2em. Как я могу исправить эту проблему при использовании 2em для установки шрифта? И что более важно, если кто-нибудь знает, что вызывает проблему?

источник

2015-04-15 clankill3r

Это, как представляется, вызвано спецификой проблемы. Декларация 'font-size' вашего' body' переписывается, поскольку '#header p' является более конкретным, поэтому вместо этого используется' 2em'. Измените его там и посмотрите, как вы его получите. – jbutler483

Да, но он должен использовать '2em' текущего размера шрифта правильно? – clankill3r

Я вижу, что вы использовали 10px на p-элементе, поэтому (насколько я могу судить), я считаю, что размер шрифта должен быть 2 * em, когда M - 10px (20px, грубо). Вы смешиваете множество единиц, здесь (em, px и%), поэтому довольно сложно дать вам простой ответ. Может быть, чтение [this] (http://www.w3.org/WAI/GL/css2em.htm) может дать некоторый свет на этот вопрос? – jbutler483

Проблема здесь - специфика и каскад. Инспектор всегда перечисляет селекторы в порядке, наиболее специфичном для наименее специфичного. Если два селектора имеют одинаковый вес, тогда каскад (порядок источника) запускается с помощью селектора, который пришел позже, выигрывая.

Например:

p { 
    color: white; 
    margin: 0 0 1em; 
} 
/* ... bunch of other CSS here ... */ 
p { 
    color: blue; 
} 
/* final rule */ 
p { 
    color: blue; 
    margin: 0 0 1em; 
}

font-size: 62.5% на body используется, чтобы установить базовый размер шрифта из 16px в 10px (16 х 0,625 = 10). Ваш медиа-запрос изменяет размер базового шрифта на 16px с font-size: 100%, потому что это происходит позже в документе.

С ems являются относительными измерениями вам придется либо не изменений font-size в запросе средств массовой информации к 100% (эффективно извлекая этот селектор) или добавить медиа-запрос для #header p изменения значения em.

@media(...) { 
    #header p { 
     font-size: 1.25em; /* 20/16 = 1.25 */ 
    } 
}

источник

2015-04-15 15:56:01 hungerstar

Размер шрифта всегда большой в iframe (em)

ответ

Смежные вопросы