html - IE 与所有其他处理表 td-height 的不同处理方式？

标签 html css internet-explorer html-table

我对所有 Internet Explorer 版本中的 TABLES 有疑问，或者更确切地说，TD 的高度让我抓狂。

我有以下标记

<table>
    <tbody>
        <tr style="vertical-align:top;">
            <td id="TD1" width="35" colspan="2" style="background-color:yellow; height:1%;">
                <div id="DIV1" style="height:10px; background-color:red;"></div>
            </td>
            <td id="TD2" width="15" rowspan="2" style="height:99%;">
                <div id="DIV2" style="height:160px; background-color:green;"></div>
            </td>
        </tr>
        <tr style="vertical-align:top;">
            <td id="TD3" width="25">
                <div id="DIV3" style="height:60px; background-color:blue;"></div>
            </td>
            <td id="TD4" width="10">
                <div id="DIV4" style="height:80px; background-color:orange;"></div>
            </td>
        </tr>
    </tbody>
</table>

为了更好地理解，您可以在 w3schools.com 的 tryit-editor 中执行代码

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_height .

我认为这解释了，我试图解释的:)

虽然 DIV2 的高度小于或等于 DIV1 和 DIV3 或 DIV4 的高度，但它按预期工作。但是当DIV2的高度大于DIV1和DIV3或DIV4的高度时，IE以与TD3和TD4相同的比例升高TD1。

在所有其他浏览器中，只有 TD3 和 TD4 加注。 TD1 的高度仍然与 DIV1 相同。

有人有想法或解决方法可以解决这个问题吗？

遗憾的是，无表格布局是没有选择的。

最佳答案

如果没有合适的文档类型，您将永远无法让 IE 尝试像其他更现代的浏览器那样运行。 IE 处于怪癖模式。使用这个:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者这个:

<!DOCTYPE html>

关于html - IE 与所有其他处理表 td-height 的不同处理方式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7689154/