Outlook 2007 和 2010 中的富 HTML 电子邮件...如何删除上边距？答案

【问题标题】：Rich HTML emails in Outlook 2007 and 2010... how do you remove the top margin?Outlook 2007 和 2010 中的富 HTML 电子邮件...如何删除上边距？
【发布时间】：2011-07-28 20:12:12
【问题描述】：

我有一个丰富的 HTML 电子邮件。我想知道，在 Outlook 2010 和 2007 中，如何让布局中的表格与浏览器边缘齐平？

看看这张照片：

粉色是body标签的背景色，灰色是表格的背景色。他们都有 0 一切（边距，填充等）。但仍有一些空间。粉红色不应该是可见的。

有谁知道如何去除身体上的这个空间？

还有一些用于电子邮件开头的 CSS：

<html>
<head>

    <style type="text/css">
        html, body{ width:100%; }
        body{ background-color:#ff00ff; }
    </style>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Test</title>
</head>
  <body topmargin="0" style="margin:0; padding:0; width:100%; background-color:#ff00ff;" >
            <table topmargin="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;border-spacing: 0;border: 0; margin:0; padding:0; background-color:#eee;" >

干杯！

【问题讨论】：

标签： html css email layout outlook-2007

【解决方案1】：

Outlook 2007/2010 为所有 html 电子邮件添加了 15 像素的顶部/底部和 10 像素的左/右正文填充。你无法摆脱它。

~~这是一个伪造完整背景的技巧：http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048~~

【讨论】：

【解决方案2】：

我知道这有点晚了，但我偶然发现了这篇文章，并认为您也可以测试这种方法。

http://theboywhocriedfox.com/code-snippets/fixing-the-forced-body-padding-in-outlook-2007-2010-and-2013/

“修复 Outlook 2007、2010 和 2013 中的强制正文填充

最近测试了一封 html 电子邮件，收件人比例很高 可能是 Microsoft Outlook 的用户我遇到了一个错误 无法覆盖版本中的强制正文填充 outlook（使用 MS Words 渲染引擎 2007、2010、2013）。

这破坏了设计并导致了不需要的空白 电子邮件的左边距。 Outlook 支持的违规版本 margin（包括负边距）但仅支持内联样式。所以 修复/破解是将整个电子邮件包装在一个包装表中并应用 对有问题的电子邮件客户端的负边距 - 使用 html ‘if 声明如下。"

<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td>
<!--<![endif]-->

<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
 <tr>
   <td>
<![endif]-->
    <!-- YOUR CONTENT HERE -->
    </td>
  </tr>
</table>

【讨论】：

【解决方案3】：

由于 Outlook 不支持保证金 -reference。我解决这个问题的方法如下。希望它会帮助某人。

                <table cellpadding="0" cellspacing="0" border="0" style="width:100% !important;  margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <!-- SECTION:TOP -->
                    <tr style="margin:0; padding:0; border:0;">
                        <td>
                            <img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
                        </td>
                    </tr>
                    <tr style="margin:0; padding:0; border:0;">
                        <td>
                            <img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
                        </td>
                        <td>
                            <img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
                        </td>
                    </tr>

【讨论】：

【解决方案4】：

Outlook 使用损坏的 Microsoft Word HTML 引擎，并且与浏览器没有任何合理的相似之处。

如果你有 Word，你至少可以以 html 格式打开你的电子邮件，看看它是如何呈现的，而不必经历整个邮件周期。

Outlook 确实是任何电子邮件营销人员的祸根。这绝对是一堆废话，甚至无法支持最基本的 CSS 期望。

我不得不与平面设计师进行许多坦率和令人失望的讨论，讨论由于 Outlook 导致电子邮件作为平台的局限性。 Microsoft 在使用 Outlook 的 Word 引擎方面已经严重倒退了一步。

【讨论】：

【解决方案5】：

使用纯 CSS（我不确定 IE 的制造商是否喜欢阅读），您可以使用 !important 来强制 <table> 和 <body> 的边距和填充成为0px:

html, body
{
  margin: 0px !important;
  padding: 0px !important;
}

table
{
  margin: 0px !important;
}

也许它会起作用，但也许不会。我不确定 Outlook 如何处理 CSS...

【讨论】：

【解决方案6】：

尝试在<body> 标签上使用margintop="0" marginleft="0" marginright="0"（更新为完整示例）：

<html>
<head>
  <title>Title Tag</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">

</td></tr></table>
</td></tr></table>
</body>
</html>

您需要将 600 的宽度设置为电子邮件的宽度。

在 CSS 中存在带有正文标签和填充/边距值的跨电子邮件客户端错误。

注意 - 这只是必要的，并且只适用于 body 标签。

【讨论】：

我已经更新了代码以包含完整的代码，您可以将其用作主 HTML 的包装器。

【解决方案7】：

<body style="padding:0px; margin:0px;"> 不起作用。

我发现在 Outlook 2007/2010 中，如果您将 padding-top 应用于列，但未应用于同一行中的其他列，Outlook 将出于某种原因将该填充应用于所有列。您是否可以粘贴更多电子邮件代码，以便我们可以查看它不是导致问题的其他原因。

【讨论】：