6

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

有趣的是，当放置在 a 内时，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' 高度更改为固定高度。

4

2 回答 2

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 控制开发团队也对此进行了评论（请参阅此处）。我还没有找到确定 150px 是强制性最小值的确切原因，但它确实解释了您所看到的行为。

于 2012-12-19T17:59:06.187 回答
0

您可以尝试将表及其子项设置为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;
}
于 2012-10-18T15:21:52.957 回答