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

Question

第一; 我已经在这里和网上搜索了此内容，但找不到有效的解决方案。 从字面上看，我现在正在处理此问题两天，所以我不得不问。

我有以下问题：

    <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示例，仅在Chrome中有效

内容通过Javascript动态修改后，中间的左上和左单元格会扩展。

我想这确实与DocType有关，但是我不是专家。

有没有一种方法可以使Internet Explorer和Firefox仅扩展左下方的单元格； 上面的其他两个单元应该保持原样。

请需要帮助。

Answer 1

那么前两个单元格必须只有5px高吗？ 在FF上，如果您从第三个td删除height：100％，则可以使用。

编辑：好的，对我来说，如果不是在最后一个div上写height：640px，而不是100％的话，那还是可以的。 既然您知道表格的总高度为650px，那么这应该不是问题。

Answer 2

看这里同样的问题： 使用rowspan时，IE设置行高不起作用

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

Answer 3

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

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