下面是一个带有表格布局的简单 html 代码。
在 FF 中，它看起来就像我认为的那样，
在 IE7 中则不然。我究竟做错了什么？
我该如何解决它？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<TITLE>test</TITLE>
</head>
<body>
<table id="MainTable" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td colspan="4">
<div style='width:769; height:192;'>192
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div style='width:383; height:100;'>100
</div>
</td>
<td rowspan="2" valign="top">
<div style='width:190; height:200;'>200
</div>
</td>
<td rowspan="2" valign="top">
<div style='width:190; height:200;'>200
</div>
</td>
</tr>
<tr>
<td valign="top" rowspan="2">
<div style='width:190; height:200;'>200
</div>
</td>
<td valign="top" rowspan="2">
<div style='width:190; height:200;'>200
</div>
</td>
</tr>
<tr>
<td valign="top">
<div style='width:190; height:100;'>100
</div>
</td>
<td valign="top" >
<div style='width:190; height:100;'>100
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
</tr>
<tr>
<td>
<div style='width:190; height:100;'>100
</div>
</td>
<td>
<div style='width:190; height:100;'>100
</div>
</td>
<td colspan="2">
<div style='width:383; height:100;'>100
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
我假设您抱怨中间行的最小高度（仅包含行跨单元格的行），以及相邻行的放大高度以进行补偿，从而在 div 之间留下间隙。
当行仅包含跨行单元格时，IE 无法计算最佳行高。当您绝对无法重新调整它以消除行跨度时，通常的解决方案是在表格的一侧添加一个 1px 的“虚拟”列，其中包含空单元格，每个单元格的“高度”设置为行应该有多高。
但是，是的，根据您打算用它做什么，CSS 布局可能更合适。如果它真的是像这个例子一样的所有东西都固定像素的布局，那么每个 div 的绝对定位将会变得非常非常容易。
其他位：CSS 宽度/高度值需要单位（大概是“px”）； valign/cellspacing/等等。即使您使用表格布局，也可以在样式表中更轻松地完成；标准模式 DOCTYPE 可以防止一些更严重的 IE 错误（尽管不是这种旧的、非 CSS 相关的错误）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
