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，它可以正常工作。但我真的需要能够在这里隐藏和显示有问题的iframe。

这是显示切换机制的代码。

$('#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

一切都应该可以正常工作，设置父div的显示属性不应该影响内部的iframe ......

您是否尝试过其他浏览器（Opera，IE，旧版FF，......）？

但是，如果你说（我发现它本身不太可能，除非FF 7.01有一些奇怪的错误）“显示”引起它，你可以玩它 - 只用JS而不是CSS设置显示，或者替换它具有可见性和尺寸样式......或者将样式（包括显示）从父div移动到iframe本身。

Answer 3

答案是在加载时将display设置为空，导致elem.style.height，outerWidth()，outerHeight()，scrollHeight()以及其他此类调用返回0在Firefox（而不是Chrome / Safari）中。我在javascript中使用这些调用来定位元素。

因此，目前我使用否定z-index来隐藏iframe而不是将显示设置隐藏为无。

css在FF中显示问题

3 个答案: