Question

某些浏览器误解了这个HTML表格，我无法理解原因：

Chrome和Outlook 显示我期望的渲染，其中第2行和第3行的第2个单元格通过第4到第10行的第4个单元格。

Screenshot of Chrome rendering http://www.team-logics.com/public/stackoverflow/2010-12-05-Chrome.png

Internet Explorer 8和Opera 10 显示不同的内容，其中第4行到第10行的第4个单元格在第2行和第3行的第2个单元格之后开始。

Screenshot of Internet Explorer 8 rendering http://www.team-logics.com/public/stackoverflow/2010-12-05-IE.png

为什么我的colspans et rowspans没有被解释为什么？哪种浏览器是对的？如何安排我的代码以便它们像Chrome一样呈现？

我的实际代码：（对不起，脏代码，这是一个电子邮件签名）

<table border=0 cellspacing=0 cellpadding=0 width=400 style='width:300pt;border-collapse:collapse;border:1px solid black;'>
 <tr style='height:9.75pt'>
  <td colspan=6 valign=top style='border:1px solid black;height:9.75pt;width:300pt;' width="400">
  </td>
 </tr>
 <tr style='mso-yfti-irow:1;height:12pt' height="16">
  <td rowspan=9 valign=top style='border:1px solid black;height:12pt;width:14.25pt' width="19">
  </td>
  <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271">
  </td>
  <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width: 72pt' width="96">
  </td>
  <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width:10.5pt' width="14">
  </td>
 </tr>
 <tr style='mso-yfti-irow:2;height:12pt' height="16">
  <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271" height="16">
  </td>
 </tr>
 <tr style='mso-yfti-irow:3;height:3.75pt' height="5">
  <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227" height="5">
  </td>
  <td colspan=3  rowspan=7 valign=top style='border:1px solid black;height:3.75pt;width:115.5pt' width="154">
  </td>
 </tr>
 <tr style='mso-yfti-irow:4;height:11.25pt' height="15">
  <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37">
  </td>
  <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190">
  </td>
 </tr>
 <tr style='mso-yfti-irow:5;height:11.25ptpt' height="15">
  <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37" height="15">
  </td>
  <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190" height="15">
  </td>
 </tr>
 <tr style='mso-yfti-irow:6;height:3.75pt' height="5">
  <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227">
  </td>
 </tr>
 <tr style='mso-yfti-irow:7;height:11.25pt' height="15">
  <td colspan=2 valign=top style='border:1px solid black;height:11.25pt;width:170.25pt' width="227" height="31" >
  </td>
 </tr>
 <tr style='mso-yfti-irow:8;height:23.25pt' height="31">
  <td colspan=2 valign=top style='border:1px solid black;height:23.25pt;width:170.25pt' width="227">
  </td>
 </tr>
 <tr style='mso-yfti-irow:9;mso-yfti-lastrow:yes;height:50.25pt' height="67">
  <td colspan=2 valign=top style='border:1px solid black;height:50.25pt;width:170.25pt' width="227">
  </td>
 </tr>
</table>

Answer 1

我不确定在哪里发布此问题，所以我也在DocType上发布了它。

我在那里得到了答案：http://doctype.com/incorrect-internet-explorer-8-colspan-interpretation

我还必须指定我的。

Answer 2

对于许多列而言，您可能无法获得CSS宽度（在style属性中指定）和实际宽度。这两个值似乎不同，我怀疑浏览器决定使用哪个值有所不同。尝试删除重复，看看会发生什么。

Internet Explorer 8 colspan解释不正确？

2 个答案: