html - Outlook 2007/2010 用表格打破水平列

Question

我已经建立了一封电子邮件，其中包含由“宝丽来”样式边框和标题包围的图像。为此，我用白色背景围绕图像构建了一个表格，除 Outlook 2007 和 2010 外，一切正常。这是它的外观（Outlook 2011 版本）：

这是它在 07/10 中的显示方式，将表格推出页面宽度并大大增加表格的宽度：

这是我使用的代码 - 表格是唯一导致问题的元素：

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
    <tbody class="mcnImageBlockOuter">
        <tr>
            <td valign="top" style="padding: 9px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" class="mcnImageBlockInner">
                <table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                    <tbody>
                        <tr>
                            <td class="mcnImageContent" valign="top" style="width:164px;background-color:white;padding-right: 9px;padding-left: 9px;padding-top: 9px;padding-bottom:9px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                <table>
                                    <tr>
                                        <td style="max-width:160px;border: 1px solid #b3b3b3;">
                                            <img mc:edit="product 1" class="mcnImage" width="100%" style="max-width:160px;">
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top" mc:edit="Caption 1" class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color:white;font-family: Helvetica;font-size: 11px;line-height: 150%;text-align: left;">
                                <center>&nbsp;</center>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top" style="padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color:white;text-align: left;">
                                <img align="center" height="18" src="http://gallery.mailchimp.com/004beaebbdbc9392458d4bde2/images/shadow.1.gif" style="height: 18px;width:100%;">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

尝试使用以下代码（我建议将其用作嵌入式样式），这始终可以解决我的许多 Outlook 2007/2010/2013 间距问题：

表 td {边框折叠：折叠；} 表 { 边框折叠：折叠；mso-table-lspace：0pt；mso-table-rspace：0pt；}

Answer 2

您的表格的宽度被设置为 [其父容器的] 的 100%。

<table ... width="100%" ...></table>

完整的代码没有给出，但我只能假设它的父级的宽度大于上面内容的宽度。

Answer 3

您不能在 HTML 电子邮件中可靠地使用 css 类或 ID。

您应该只使用内联 css 样式，甚至将它们保持在最低限度，以确保最大的电子邮件客户端兼容性。

我也不认为使用 max-width 属性会给你带来任何好处。我建议使用常规宽度和高度 html 标记简单地设置图像的实际高度宽度。

这是 html 电子邮件的一个很好的参考：

http://kb.mailchimp.com/article/how-to-code-html-emails