Iframe внутри несовместимости DIV Chrome-Firefox - PullRequest
Новая
       5

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

1 голос
/ 09 октября 2011

Если вы поместите 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 займет всю ширину, но не всюheight.

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

Ответы [ 3 ]

2 голосов
/ 13 октября 2011

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

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

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

1 голос
/ 13 октября 2011

взятие от Деннис '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 (извините, это всеЯ здесь со мной атм.)

0 голосов
/ 10 октября 2011

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

...