html - Outlook - 电子邮件中页脚的错误显示宽度

Question

我在 Outlook 2003、2007、2010、2013 的邮件中显示页脚时遇到问题。 Outlook 不遵守表格所需的宽度并将整个脚放在左侧。

在代码和屏幕下方。 感谢您提供任何提示。

                <tr>
                <td class="left-sidebar" style="padding: 0;text-align: center;font-size: 0" bgcolor="#191919">
                    <!--[if (gte mso 9)|(IE)]>
                    <table width="100%">
                    <tr>
                    <td width="220">
                    <![endif]-->
                    <div class="column left" style="width: 100%;display: inline-block;vertical-align: middle;max-width: 220px">
                        <table width="100%" style="border-spacing: 0;font-family: Arial, Helvetica, sans-serif;color: #333" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td class="inner" style="padding-bottom:30px;padding-top:10px">
                                     <img src="#" width=210 alt="logo"   style="border: 0;width: 100%;max-width: 210px"></a>
                                </td>
                            </tr>
                        </table> 
                    </div>
                    <!--[if (gte mso 9)|(IE)]>
                    </td><td width="380">
                    <![endif]-->
                    <div class="column right" style="width: 100%;display: inline-block;vertical-align: middle;max-width: 380px">

                        <table width="100%" style="border-spacing: 0;font-family: Arial, Helvetica, sans-serif;color: #333" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td class="inner contents" style="padding: 10px;width: 100%;padding-top: 30px;font-size: 12px; color: #ffffff; font-weight: lighter; text-align: left; font-family: Arial, Helvetica, sans-serif; line-height: 18px;vertical-align: middle;">
                                    Nam semper magna nec urna sagittis, hendrerit dapibus nibh malesuada.  
                                </td>
                            </tr>
                            <tr>
                                <td class="inner contents" style="padding: 10px;width: 100%;padding-top: 10px;font-size: 12px; color: #ffffff; font-weight: lighter; text-align: left; font-family: Arial, Helvetica, sans-serif; line-height: 18px;vertical-align: middle;">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed metus vitae justo blandit euismod non quis tortor. Pellentesque feugiat tempus viverra. Nam semper magna nec urna sagittis, hendrerit dapibus nibh malesuada. Aliquam elit lectus, semper vel augue nec, tempor aliquet felis!!
                                </td>
                            </tr>
                            <tr>
                                <td class="inner contents" style="padding: 10px;width: 100%;padding-top: 10px;font-size: 12px; color: #ffffff; font-weight: lighter; text-align: left; font-family: Arial, Helvetica, sans-serif; line-height: 18px;vertical-align: middle;">
                                    Nam semper magna nec urna sagittis, hendrerit dapibus nibh malesuada. Aliquam elit lectus, semper vel augue nec, tempor aliquet felis!!
                                </td>
                            </tr>
                            <tr>
                                <td height="50" style="height:50px"></td>
                            </tr> 
                        </table>
                    </div>
                    <!--[if (gte mso 9)|(IE)]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
     </div>
</center>

图片顶部 - 正确的页脚，下方 - Outlook 中的页脚

Answer 1

谈到 HTML 电子邮件，您确实需要回归基础。这意味着您不应该真正使用 div 元素，因为旧客户端可能无法正确呈现它们。想想 90 年代的 HTML ;)

您可以嵌套表格，因此使用它来拆分布局，为了测试，我建议在 acid 上发送电子邮件。