FF中的css显示问题答案

【问题标题】：css display problems in FFFF中的css显示问题
【发布时间】：2023-04-01 10:31:02
【问题描述】：

我正在使用以下代码：

<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 是一个锚标记。

帮助？

谢谢！

【问题讨论】：

如果没有明确设置 div 的默认显示值将是“块”，所以如果它在没有设置显示的情况下工作，当您单击按钮时可能存在 javascript 问题。我们能看到 tge 的完整代码吗？
除了包装 div 之外，您是否尝试隐藏（切换 display 值）iframe 本身？如果您设置display: block，加载页面，然后隐藏iframe，然后使用您的按钮再次显示它会发生什么？
“我通过使用一个按钮来查看布局，该按钮调用将显示属性设置为'块'。” — 你能把那个按钮的代码也贴出来吗？没有它，调试你的问题有点困难。
添加了编辑。希望它现在更清楚一点。谢谢！
您可以通过使用 hide() 和 show() 来简化代码，而不是自己将 CSS 属性 display 设置为 block 或 none。仅供参考

标签： html css firefox

【解决方案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();
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我知道默认模式是“阻止”，但最初将其设置为“无”似乎会在重置显示模式时破坏布局。它在 Chrome 上完美运行。所以，我真的不明白出了什么问题。

【解决方案3】：

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

所以，现在，我使用否定的z-index 来隐藏 iframe，而不是显示设置为无。

【讨论】：