【发布时间】:2011-12-03 02:24:53
【问题描述】:
我在所有 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 不是处于 Quirks 模式。另外,您正在测试哪个版本的 IE?
-
如果没有正确的文档类型,您将永远无法让 IE 尝试像其他更现代的浏览器一样执行。 IE 处于 quirks 模式。
-
@Spudley IE7(兼容模式)、IE8、IE9
标签: html css internet-explorer html-table