放置在表格单元格中时出现奇怪的 iframe 高度行为

Posted 2023-03-06

【中文标题】放置在表格单元格中时出现奇怪的 iframe 高度行为

【英文标题】：Strange iframe height behaviour when placed in a table cell

【发布时间】：2012-10-09 01:53:32

【问题描述】：

当我将iframe 放置在表格单元格中时，我遇到了高度问题。 Firefox 和 Chrome 将其最小高度设置为 150px，而 Internet Explorer 处理较低的高度。当单元格的高度大于150px 时，iframe 很好地跟随。

有趣的是，当放置在div 中时，它的高度是正确的，无论div 的高度是否小于150px，但在表格单元格中的高度似乎遵循它自己的规则（由浏览器设置)。

Here's a JSFiddle

iframe 测试示例如下：

iframe 在一个高度小于 150px 的 div 中 iframe 在高度小于 150px 的表格单元格中 iframe 在高度超过 150 像素的 div 中 iframe 在高度超过 150px 的表格单元格中

附加限制

因为看起来iframe 放置在div 中时工作正常，这可能是一个不错的解决方案，但我无法控制html，因为它是在表格单元格中呈现iframe 的第三方控件的一部分。 javascript 操作当然总是一种选择，但我想只使用 CSS 来解决这个问题。而且由于容器的高度也是由第三方控制的，所以我无法将iframe的高度更改为固定高度。

【问题讨论】：

它在 Opera 12 中按预期工作......

@feeela: :D :D :D 它在 IE 中也可以正常工作。但这并不能解决我的 Chrome 和 Firefox 问题，是吗？ ;） 谢谢你的信息。我还没有在 Opera 中测试过。无论如何对将来的参考很有帮助。

【参考方案1】：

您可以尝试将表及其子项设置为display: block。

http://jsfiddle.net/willemvb/aM2Fx/

table,
tbody,
tr,
td
    position: relative;
    display: block;
    width: 100%;
    height: 100%;   

或者你可以在桌子上使用相对定位，在iframe上使用绝对。

http://jsfiddle.net/eeZHZ/

table

    width: 100%;
    height: 100%;
    position: relative;



table iframe 
    position: absolute;
    top: 0;

【讨论】：

恐怕不行，因为我的实际表格不止一行，还有一些有自己的元素层次结构......它实际上是一个带有标题栏、内容区域和状态栏的窗口.由 Telerik 编写，因此您可以想象它的状态。我什至无法想象这些东西是谁买的？我只对第三方控件有过不好的体验...

另一件事是只有在高度低于 150 像素时才设置这些。否则，当高度大于 150 像素时，它会破坏 Firefox 中的行为。这意味着我应该使用脚本... :(

我改进了多个 td 的答案

感谢您的编辑。拥有一个包装器很容易，是的，因为iframe 成为块元素的子元素。但正如我的问题中提到的，我无法控制 HTML，因为它是由第三方组件（由 Telerik）生成的。如果我使用 Javascript 添加包装器，我也可以将计算出的静态高度设置为我的iframe，因此不需要包装器。问题是：只有 CSS，没有脚本没有 HTML 操作。

对不起，错过了。你知道会有多少个 td，它们的宽度可以相等吗？ jsfiddle.net/eeZHZ/5 似乎可以工作，虽然 Firefox 有点破解

【参考方案2】：

表格单元格中 iframe 的 150 像素限制已报告为 Gecko/Webkit 浏览器引擎中的错误：

https://bugzilla.mozilla.org/show_bug.cgi?id=253363

https://bugzilla.mozilla.org/show_bug.cgi?id=324388

Telerik RAD 控制开发团队也对此进行了评论（请参阅here）。我还没有找到确定 150 像素是强制性最小值的确切原因，但它确实解释了您所看到的行为。