TD 高度扩展了 Internet Explorer 中的动态内容答案

【问题标题】：TD height expands on dynamic content in Internet ExplorerTD 高度扩展了 Internet Explorer 中的动态内容
【发布时间】：2013-01-21 09:56:18
【问题描述】：

首先；我已经在这里和网上搜索过这个，但找不到有效的解决方案。我现在正在研究这个问题两天，所以我不得不问。

我有以下问题：

    <table width="650px" border="1" >
    <tr>
        <td style="height :5px">stay as you are</td>
        <td rowspan="3" id="content">
            empty
        </td>
    </tr>
    <tr>
        <td style="height :5px">please dont expand</td>
    </tr>
    <tr>
        <td style="background: red;height : 100%;">&nbsp;</td>
    </tr>
</table>
<input type="button" value="do" onclick="dontExpand()">
<script language="Javascript">
    function dontExpand() {
        var html = "";
        for (var i = 0; i < 100; ++i)
            html += "lorem ipsum<br>";
        document.getElementById("content").innerHTML = html;
    }
</script>

JSFiddle example of the problem, works only in Chrome

内容被Javascript动态修改后，左上角和中间左侧单元格正在扩展。

我猜它确实与 DocTypes 有关，但我不是专家。

有没有办法让 Internet Explorer 和 Firefox 只扩展左下角的单元格；上面的其他两个单元格应该保持原样。

需要帮助。

【问题讨论】：

标签： javascript html html-table

【解决方案1】：

看这里同样的问题：IE setting row height not working when using rowspan

我想一种解决方案是在添加内容后根据总高度更新内容后更改最后一个表格 col 的高度 - 10 px？

【讨论】：

动态添加内容后如何获取表格高度的任何想法？我已经尝试过 document.getElementById("content").style.height 和变体，但无法正常工作。
已解决：使用纯Javascript添加内容后，我无法确定高度。所以我改用jquery： $("#theRed").css("height", $("#content").height() - 10); （'theRed' 是左下方单元格的 ID。）非常感谢，Techmonk！

【解决方案2】：

所以前两个单元格必须只有 5px 高？如果您从第三个 td 中删除 height:100%，则在 FF 上它可以工作。

编辑：好吧，如果我在最后一个 div 上写 height:640px 而不是 100%，那么它有点工作。既然你知道表格的总高度是 650px，那应该没问题。

【讨论】：

确实，我删除了你所说的 100% 高度，它也适用于 FF。 Bu IE问题依然存在。
通过将三个 div 设置为 5px、5px 和 640px 来在 ie9 上为我工作
但是 640 是表格的宽度，实际上在这个例子中并不重要。由于内容（lorem ipsum）是由Ajax填充的，我不知道数据的数量，所以我最终无法知道表格的确切高度。

【解决方案3】：

var height = document.getElementById("content").offsetHeight; // to determine the content height.
table.style.height = height + 10 + "px";

仅对 IE 执行此操作，因为删除高度：100% 在其他浏览器中有效

【讨论】：