Iframe внутри несовместимости DIV Chrome-Firefox

Если вы поместите iframe внутрь div:

<div id="big-box">
    <iframe src="http://www.google.com" class="frame">
    </iframe>
</div>

И используйте CSS, чтобы попросить iframe занять всю доступную область экрана:

#big-box {
    background-color: #aaf;
}

.frame {
    border: medium none;
    height: 100%;
    width: 100%;
}

Он отлично работает в Chrome (12.07), но не работает в Firefox (3.6.17). Эта демонстрация показывает, что в Chrome вся область JSFiddle содержит iframe , но если вы попробуете этот пример в Firefox, iframe будет занимать всю ширину, но не всю высоту.

Также обратите внимание, что если вы зафиксируете ширину и высоту для big-box, это сработает, но это не главное (я не могу это изменить). Дело в том, почему эта несовместимость и как это исправить (делать всегда так, как это делает Chrome).


google-chrome html css firefox incompatibility
person Ivan    schedule 09.10.2011    source источник
comment
Похоже, что он не работает в Chrome 16, возможно, это была ошибка в Chrome.   -  person Shedokan    schedule 15.10.2011

Ответы (3)


arrow_upward
2
arrow_downward

Последняя версия Google Chrome (14.0.835) отображает скрипку точно так же, как последняя версия Firefox (3.6.23) и последняя версия IE (9.0.3). Таким образом, вы можете видеть, что Google Chrome изначально не должен был делать это «правильно». Он отображал то, что вы хотели по ошибке...

Добавление position: absolute; к стилю .frame позволит достичь того, к чему вы стремитесь. Он работает во всех трех упомянутых браузерах.

Вот скрипт: jsfiddle.net/Q5mt5/1

person Dennis    schedule 13.10.2011
comment
у вас есть нормализация css на вашем jsFiddle. Это не поможет показать различия браузеров. - person James Khoury; 13.10.2011
comment
@JamesKhoury: Спасибо за совет. Я никогда не использовал скрипки. Я только что предоставил один, так как ОП попросил об этом. - person Dennis; 13.10.2011
comment
Что за версия firefox 2.6.23? последняя версия 10.0a1 - person Shedokan; 15.10.2011
comment
Я имел в виду 3.6.23. Ведь это не самая новая версия. Я использую Firefox только для тестирования. Мой стандартный браузер Chrome... - person Dennis; 15.10.2011

arrow_upward
1
arrow_downward

взяв из jsFiddle Денниса, я подумал, что вы можете сделать :

html, body
{
    width: 100%;
    height: 100%;
    padding:0px;
}
div {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

iframe {
    height: 100%;
    width: 100%;
}

jsfiddle работает в Firefox 4 и Chrome 14 (извините, это все, что у меня есть с собой). .)

person James Khoury    schedule 13.10.2011

arrow_upward
0
arrow_downward

Здесь фаерфокс прав. iframe по умолчанию является встроенным замененным элементом, поэтому он находится на базовой линии. Если вы добавите display: block; к стилю класса фрейма, то он будет подчиняться правилам определения размера блока и полностью закроет div.

person Neil    schedule 09.10.2011
comment
Я пытался добавить display:block, но все равно не работает. Изменений нет :( - person Ivan; 10.10.2011