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 的电子邮件。