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

Question

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

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

Here's a JSFiddle

示例iframe测试如下：

高度小于150像素的iframe中的
1. div 高度小于150像素
的表格单元格中的
2. iframe
3. iframe位于div，身高超过150像素
4. iframe位于高度超过150像素
的表格单元格中

附加限制

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

Answer 1

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

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

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

Telerik RAD控制开发团队也对此进行了评论（见here）。我没有找到一个确定的理由，为什么决定150px是强制性最小值，但它确实解释了你所看到的行为。

Answer 2

您可以尝试将表及其子项设置为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;
}