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

Question

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

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

Here's a JSFiddle

iframe 测试示例如下:

1. iframe 在 div 中，高度小于 150px
2. iframe 在高度小于 150px 的表格单元格中
3. iframe 在 div 中，高度超过 150px
4. iframe 在高度超过 150px 的表格单元格中

附加限制

因为 iframe 放在 div 中时似乎工作正常，这可能是一个不错的解决方案，但我无法控制 HTML，因为它是第三方控件的一部分在表格单元格内呈现 iframe。 Javascript 操作当然总是一个选项，但我想通过仅使用 CSS 来解决这个问题。而且由于容器的高度也由第三方控制，我无法将 iframe 的高度更改为固定高度。

Answer 1

表格单元格中 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 像素是强制性最小值，我还没有找到明确的理由，但它确实解释了您所看到的行为。