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％在其他瀏覽器中有效