HTML嵌套表在IE中没有正确预览

Question

我似乎无法将表格单元格中的右下方表格与IE中的底部对齐。 （尽管将表格单元格与vertical-align对齐：“bottom”并声明valign =“bottom”。错误？

另请注意。这是一封电子邮件，因此头部的CSS声明基本上是禁止的。 它预览了堆叠列表垂直对齐到顶部的表格。

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="10" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td>
        <td width="258" bgcolor="#ffffff" valign="top" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif; color:#666666;"><table width="258" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="258" height="15" align="left" valign="top" bgcolor="#ffffff" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif; color:#666666;"><span style="font-size:18px; line-height:20px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#e48828;"><br />
                        Curabitur egestas lorem a nisl aliquet.</span><br />
                        <br />
                        Fusce faucibus lorem vel arcu aliquet rutrum. Etiam semper, urna ut scelerisque tristique, dolor sapien porta justo, rutrum tempor ipsum. <br />
                        <br />
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="15" bgcolor="#ffffff">&nbsp;</td>
                                <td width="10" bgcolor="#ffffff"><img src="#" width="10" height="10" alt=" " style="display:block;"/></td>
                                <td width="10" bgcolor="#ffffff">&nbsp;</td>
                                <td width="223" align="left" bgcolor="#ffffff" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif;"><a href="#" target="_blank" style="text-decoration:none; color: #e48828;">Etiam sem elit, venenatis sit.</a></td>
                            </tr>
                        </table></td>
                </tr>
            </table></td>
        <td width="10" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td>
        <td width="11" bgcolor="#eeefef" style="font-size:1px; line-height:1px;">&nbsp;</td>
        <td width="271" bgcolor="#ffffff" valign="top" style="font-size:1px; line-height:1px;"><table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="271" bgcolor="#ffffff"><table border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td width="100" height="152" bgcolor="#B2B3B7">&nbsp;</td>
                                <td width="10" bgcolor="#eeefef" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                <td width="10" bgcolor="#FFFFFF" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                <td width="151" align="left" valign="middle" bgcolor="#ffffff" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif; color:#666666;"><br />
                                    <span style="font-size:12px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color:#005696;"><strong>Phasellus sed ipsum vel augue.</strong><br />
                                    </span> <span style="font-size:10px; line-height:12px;">Aliquam suscipit libero non orci tincidunt nec convallis. <br />
                                    </span></td>
                            </tr>
                        </table></td>
                </tr>
                <tr>
                    <td width="271" height="12" bgcolor="#eeefef">&nbsp;</td>
                </tr>
                <tr>
                    <td width="271" valign="bottom" bgcolor="#ffffff" style="vertical-align:bottom;"><table border="0" cellspacing="0" cellpadding="0" height="100%">
                            <tr>
                                <td width="25" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                <td width="10" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                <td width="10" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                <td width="226" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px;">&nbsp;</td>
                            </tr>
                            <tr>
                                <td width="25" valign="middle" bgcolor="#ffffff">&nbsp;</td>
                                <td width="10" valign="middle" bgcolor="#ffffff"><img src="#" width="10" height="10" alt=" " style="display:block;"/></td>
                                <td width="10" valign="middle" bgcolor="#ffffff">&nbsp;</td>
                                <td width="226" align="left" valign="middle" bgcolor="#ffffff" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif;"><a href="#" target="_blank" style="text-decoration:none; color: #e48828;">Etiam sem elit, venenatis sit.</a></td>
                            </tr>
                            <tr>
                                <td width="25" valign="middle" bgcolor="#ffffff">&nbsp;</td>
                                <td width="10" valign="middle" bgcolor="#ffffff"><img src="#" width="10" height="10" alt=" " style="display:block;"/></td>
                                <td width="10" valign="middle" bgcolor="#ffffff">&nbsp;</td>
                                <td width="226" align="left" valign="middle" bgcolor="#ffffff" style="font-size:12px; line-height: 20px; font-family:Arial, Helvetica, sans-serif;"><a href="#" target="_blank" style="text-decoration:none; color: #e48828;">Etiam sem elit, venenatis sit.</a></td>
                            </tr>
                        </table></td>
                </tr>
            </table></td>
        <td width="10" bgcolor="#eeefef" style="font-size:1px; line-height:1px;">&nbsp;</td>
    </tr>
    <tr>
        <td width="10" height="15" bgcolor="#ffffff"  style="font-size:1px; line-height:1px; border-bottom:1px solid #b2ccdf;">&nbsp;</td>
        <td width="258" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px; border-bottom:1px solid #b2ccdf;">&nbsp;</td>
        <td width="10" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px; border-bottom:1px solid #b2ccdf;">&nbsp;</td>
        <td width="11" height="15" bgcolor="#eeefef" style="font-size:1px; line-height:1px; border-bottom:1px solid #eeefef;">&nbsp;</td>
        <td width="271" height="15" bgcolor="#ffffff" style="font-size:1px; line-height:1px; border-bottom:1px solid #b2ccdf;">&nbsp;</td>
        <td width="10" height="15" bgcolor="#eeefef" style="font-size:1px; line-height:1px; border-bottom:1px solid #eeefef;">&nbsp;</td>
    </tr>
</table>

Answer 1

我不会说这是一个错误。

此行中的表格：

<td width="271" bgcolor="#ffffff" valign="top" style="font-size:1px; line-height:1px;"><table border="1" cellspacing="0" cellpadding="0">

不需要更多的垂直空间来渲染，因此它比左侧更“闭合”。你的valign'ed表是正确对齐的，但它垂直对齐的td只能大到足以包含它，所以没有实际的valign效果。

我会通过只使用一个表来解决这个问题，根据需要使用rowpans和colspans，你可以使用无数嵌套表格...