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;）

你可以嵌套表格，所以用它来分割布局，为了测试我建议用酸电子邮件。

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

1 个答案: