Question

我使用以下标记创建了一些嵌套表，其中第一个表包含行的示例。跨度内部HTML最终将被用户通过下拉菜单选择的图像替换。

<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在标准合规模式下的显示方式的屏幕截图：

enter image description here

请注意，在右侧列的第3和第4个表中，最右侧的图像区域具有任意宽度（在图像的任一侧显示空白区域），尽管这些单元格都是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>

编辑：将style =“width：100％”添加到所有colspan = 2元素：

enter image description here

在两个受影响的表上执行此操作的效果不同。第一列大大扩展，而其他列大大减少。

Answer 1

一些想法

我注意到它是内联网。你提到“模式”是IE8标准 - 是浏览器和文件？ IE8将在intranet mode.

中执行奇怪的事情

不确定是否是拼写错误，但是表t5没有关闭最后<td>

当您设置图像占位符的内容时，任何空格都不可能悄悄进入标记？

Answer 2

该问题可能与设置了colspan的其他表格单元格有关。尝试在其他单元格上设置宽度，如此问题所示：Internet Explorer 8 table cell width bug with colspan set

IE8在IE8标准兼容模式下无法正确渲染

2 个答案: