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

Question

iframe放置在表格单元格中时,我遇到了高度问题.Firefox和Chrome设置其最小高度,150px而Internet Explorer处理较低的高度.当细胞的高度超过时150px,iframe很好地遵循.

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

这是一个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

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