1
我已经使用以下标记创建了一些嵌套表格，其中第一个表格包含一行示例。跨度内部HTML最终会被用户通过下拉菜单选择的图像替换。IE8在IE8标准兼容模式下无法正确呈现
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
<tr>
<td>
<asp:Literal runat="server" ID="t1r2c1" />
</td>
<td class="image">
<span id="s1" runat="server">
<asp:PlaceHolder ID="p1" runat="server">
</asp:PlaceHolder>
</span>
</td>
<td>
<asp:Literal runat="server" ID="t1r2c3" />
</td>
<td class="gray">
<asp:Literal runat="server" ID="t1r2c4" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2">
<!-- ... -->
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<!-- ... -->
</table>
</td>
</tr>
</table>
下面是相关的CSS：
.outer
{
border: none;
margin-left: auto;
margin-right: auto;
}
.outer td
{
vertical-align: top;
}
.column
{
border: none;
}
#rightColumn table, #leftColumn table
{
width: 100%;
}
.cell
{
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
overflow: hidden;
}
.cell td
{
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 10pt;
}
.cell .image
{
padding: 0;
margin: 0;
height: 20px;
width: 65px;
}
这里是它如何显示在IE8中符合标准的模式的截图：
注意，在第三和右侧列中的第四个表格中最右边的图像区域具有任意宽度（显示图像两侧的空白区域），尽管事实上se单元格都是class =“image”，并且应具有65px的固定宽度。 DOCTYPE声明是呈现的HTML的第一行，我已经在开发人员工具中检查过IE8的模式是否符合标准。
我真的想修复这两个表格单元格。任何建议表示赞赏。
问候。
编辑：这里为受影响的表的HTML：
<table class="cell" id="t5">
<tr><th colspan="9"><strong><asp:Literal runat="server" ID="t5r0c0" /></strong></th></tr>
<tr><td class="orange" colspan="4"><asp:Literal runat="server" ID="t5r1c0" /></td><td class="blue" colspan="4"><asp:Literal runat="server" ID="t5r1c4" /></td><td class="blue span2" rowspan="2"><asp:Literal runat="server" ID="t5r1c8" /></td></tr>
<tr><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c0" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c2" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c4" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c6" /></td></tr>
<tr><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c0" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c2" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c4" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c6" /></td><td class="image"><span id="s21" runat="server"><asp:PlaceHolder ID="p21" runat="server"></asp:PlaceHolder></span></tr>
</table>
<table class="cell" id="t6">
<tr><th colspan="9"><strong><asp:Literal runat="server" ID="t6r0c0" /></strong></th></tr>
<tr><td class="orange" colspan="4"><asp:Literal runat="server" ID="t6r1c0" /></td><td class="blue" colspan="4"><asp:Literal runat="server" ID="t6r1c4" /></td><td class="blue span2" rowspan="2"><asp:Literal runat="server" ID="t6r1c8" /></td></tr>
<tr><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c0" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c2" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c4" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c6" /></tr>
<tr><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c0" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c2" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c4" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c6" /></td><td class="image"><span id="s22" runat="server"><asp:PlaceHolder ID="p22" runat="server"></asp:PlaceHolder></span></td></tr>
</table>
EDIT：添加风格= “宽度：100％” 的所有列跨度= 2个元素：
的这样做的效果在两个受影响的表格上是不同的。第一列大大扩展，而其他列大大减少。
感谢发布。我为每个colspan = 2元素添加了style =“width：100％”，并发布了结果的屏幕截图。 – Kevin 2012-07-30 17:56:58
试着让这些colspan细胞的总宽度加起来达到100％，而不是让每个细胞本身100％。 – jrrdnx 2012-07-30 18:08:07
这样可以使colspan = 2的元素具有相同的宽度，但它大大减少了最后一个元素的宽度。基本上class = image的CSS没有被遵守，这两个特定的单元格没有宽度为65px。 – Kevin 2012-07-30 18:45:59