IE中的表格布局错误（7） [英] Table layout wrong in IE(7)
问题描述
下面是一个带有表格布局的简单html的代码。
在FF中我认为看起来应该是这样的，IE7中的
它没有。我做错了什么？
如何解决？
Below is the code of a simple html with a table layout.
In FF it's looking as I think it should look like,
in IE7 it doesn't. what am I doing wrong?
And how can I fix it?
<!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之间留下间隙。
I assume you are complaining about the minimal height of the middle row (the one containing only rowspanned cells), and the enlarged height of the adjacent rows to compensate, leaving gaps between the divs.
IE无法计算最佳行高该行仅包含rowpanned单元格。通常的解决方案是，你绝对不能重新设置它来摆脱行距是在表的一侧添加1px'虚拟'列，包含空单元格，每个单元的'height'设置为行的高度。
IE cannot calculate optimal row heights when the row contains only rowspanned cells. The usual solution when you absolutely cannot rejig it to get rid of the rowspan is to add a 1px 'dummy' column to one side of the table, containing empty cells, each with the 'height' set to how high the row should be.
但是，根据你打算用它做什么，CSS布局可能更合适。如果它真的是像这个例子一样的固定像素的所有布局，每个div的绝对定位将会很多，更容易。
But yes, depending on what you're planning to do with this, a CSS layout may well be more appropriate. If it's really a fixed-pixels-for-everything layout like this example, absolute positioning for each div will be a lot, lot easier.
其他位：CSS宽度/身高值需要单位（大概是'px'）; VALIGN / CELLSPACING /等。即使您使用表格布局，也可以在样式表中更轻松地完成;标准模式DOCTYPE可以防止一些更糟糕的IE错误（虽然，不是这个旧的，非CSS相关的错误）。
Other bits: CSS width/height values require units (presumably 'px'); valign/cellspacing/etc. can be more easily done in a stylesheet even if you are using table layouts; a standards-mode DOCTYPE may prevent some of the worse IE bugs (although, not this old, non-CSS-related one).
这篇关于IE中的表格布局错误（7）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
