iframe 高度仅在 Firefox 中无法正确显示

Posted 2023-03-06

【中文标题】iframe 高度仅在 Firefox 中无法正确显示

【英文标题】：Iframe height not displaying correctly in Firefox only

【发布时间】：2012-03-03 21:50:09

【问题描述】：

我创建了一个与 DiggBar 具有相似功能的页面（即指定的标题 height 和下面的 iframe 填充页面的其余部分）。

不久前我进行了这项工作并获得了理想的结果，但突然之间，iframe 的 height 已从剩余页面 height 的 100% 变为仅 44.8px。问题在于，这只发生在一个浏览器中——Ubuntu 上的 Firefox。

我认为这应该发生在所有其他浏览器中，但事实并非如此。它在 Windows 上的 IE、FF 和 Chrome 以及 Ubuntu 上的 Chrome 中正确显示。

最后，使用 Firebug，我选择了inspect element 来尝试确定发生了什么，但它只告诉我我的height 被定义为100%，但它是计算的 em> 只能是44.8px。

我正在寻找有关如何最好地调试此问题的一些指导，因为我已经完全没有想法了。我不认为有必要发布产生此问题的所有代码，但如果绝对需要，请询问。

谢谢。

【问题讨论】：

包含iframe的直接父级的高度是多少？

@BryanDowning iframe 的父级定义为 100% - Firebug 表示计算为 454px

您是否可以手动将iframe 的height 设置为200px 之类的东西？ iframe 应该有多高（以像素为单位）（我知道它应该是动态的，取决于浏览器的大小，只要告诉我它现在应该在你的窗口中是什么）？父级看起来是否实际上是454px 高？如果您将iframe 替换为div 并应用相同的样式规则，它的行为是否相同？

@BryanDowning 是的，我可以手动设置ifame 的height。 454px 是 iframe 的所需高度，是的，父级正确填充了这部分。如果我将iframe 替换为div，我会收到同样的问题（div 中的height 没有填充父级）- 适用于所有其他浏览器，但不是这个 FF 安装。

看不到它，我基本上没有想法。你没有任何奇怪的浮动或填充是吗？您可以通过获取父级的高度并在调整大小时动态设置 iframe 的高度来使用 javascript 修复它，但这很蹩脚...

【参考方案1】：

不幸的是，层叠样式表的 层叠 部分让我失望了。我对 iframe 的父级有另一个（我们称之为“隐藏”）引用，这导致了奇怪的 height 计算问题。

有趣的是，这只发生在我的 Ubuntu 版本的 Firefox 中。

【参考方案2】：

如果您的布局结构复杂，将所有 div 的高度设置为 100% 可能会破坏页面布局。在这种情况下，我建议使用 javascript 将 iframe 的高度设置为 100%。就我而言，我使用了 JQuery，但我相信纯 javascript DOM 函数也应该可以工作。我将 iframe 的高度设置为等于父 div 的高度：

$('#doc-preview iframe').height($('#doc-preview').height());

这里的 doc-preview 是 iframe 的父 div 的 id。

确保在页面加载后运行此脚本。