IE 中带有 valign 的 HTML 嵌套表格无法正确预览答案

【问题标题】：HTML Nested tables with valign in IE not previewing properlyIE 中带有 valign 的 HTML 嵌套表格无法正确预览
【发布时间】：2013-03-04 05:59:22
【问题描述】：

我似乎无法将表格单元格中右下角的表格与 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>

【问题讨论】：

如果是用于电子邮件模板，那么为什么它必须在 IE 中工作？
因为 IE 将用于在 Outlook 客户端和 web 客户端（如 hotmail、gmail 等）中呈现
如果你从这一行的表格中删除 1005 高度会发生什么。我现在没有 IE 来测试。

它不会改变。我试图“强制”IE 以 100% 呈现表格，但它呈现 100% 的内容而不是容器。 (td)

标签： html css email

【解决方案1】：

我不会说这是一个错误。

这一行的表格：

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

不需要更多的垂直空间来渲染，因此它比左侧“关闭”更高。您的 valign 表格已正确对齐，但它垂直对齐的 td 仅大到足以容纳它，因此 valign 没有实际效果。

我会通过只使用一个表来解决这个问题，根据需要使用行跨度和列跨度，插入你现在拥有的无数嵌套表......

【讨论】：