Проблемы с отображением CSS в FF

Question

Я использую следующий код:

<div id="trialwindow" style="display:none; background-color: #ffffff; position:fixed; z-index:1000; top:40px; left:200px; height: 600px; width: 850px; border:3px solid #000000;">
<iframe src="game/game.html" style="border: 0; width: 100%; height: 600px;"></iframe>
</div>

Это прекрасно работает в Chrome.

Но загружаемая компоновка в iframe полностью испорчена Firefox (v7.0.1). Я вижу макет, используя функцию обратного вызова, чтобы установить свойство отображения как «блок».

Если я вообще не работаю с display, он работает нормально. Но мне действительно нужно иметь возможность скрывать и отображать данный фрейм здесь.

Это код для механизма переключения дисплея.

$('#trial').click(function() {
$('#fadeoutwindow').css('display', 'block');
var trialwindow = $('#trialwindow');

trialwindow.css('display', 'block');
// To stop bubbling
return false;
});

$('#fadeoutwindow').click(function() {
$('#fadeoutwindow').css('display', 'none');
$('#trialwindow').css('display', 'none ');              
});

Здесь #fadeoutwindow - это div, который охватывает все остальное содержимое, когда появляется iframe. #trial является тегом привязки.

Помощь

Спасибо!

Answer 1

Этот пример работает в Firefox 6.0.2 и 8.0.Попробуйте это с вашим 7.0.1

http://jsfiddle.net/xw5Bv/

$('#show-iframe').click(function(e) {
    e.preventDefault();
    $('#iframe-wrapper').show();
});

$('#hide-iframe').click(function() {
    $('#iframe-wrapper').hide();
});

Answer 2

Ответ на этот вопрос заключается в том, что установка display на none во время загрузки приводит к тому, что elem.style.height, outerWidth(), outerHeight(), scrollHeight() и другие подобные вызовы возвращают 0 в Firefox (а не в Chrome / Safari).Я использовал эти вызовы в javascript для позиционирования элементов.

Итак, сейчас я использую отрицательный z-index, чтобы скрыть iframe вместо установки отображения на none.

Answer 3

Все должно работать нормально, установка свойства отображения родительского div не должна влиять на внутренние фреймы…

Экспериментировали ли вы с другими браузерами (Opera, IE, более старые версии FF,…)?

Однако, если вы заявили (что я нашел не очень вероятным само по себе, если в FF 7.01 нет какой-то странной ошибки), что «отображение» вызвало его, вы можете поиграть с ним - установить отображение только с JS, а не CSS, или заменить егостили видимости и размеров ... Или переместите стили (включая отображение) из родительского div в сам iframe.