Question

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

看一下这张照片：

enter image description here

粉红色是身体标签的背景颜色，灰色是桌子的bg。它们都有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;" >

干杯！

Answer 1

Outlook 2007/2010为所有HTML电子邮件添加了15px的上/下和10px左/右身体填充。你无法摆脱它。

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

Answer 2

Outlook使用损坏的 Microsoft Word HTML引擎，并且不基于与浏览器的任何合理相似性。

如果你有Word，你至少可以用html打开你的电子邮件，看看它是如何渲染的，而不必经历整个邮件循环。

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

由于Outlook，我必须与平面设计师就电子邮件作为平台的限制进行许多坦诚和令人失望的讨论。微软在使用Outlook引擎的Word引擎方面做了一个倒退。

Answer 3

使用纯CSS（我不确定IE的制作者喜欢阅读），您可以使用!important 强制 <table>和<body>的边距和填充0px为html, body { margin: 0px !important; padding: 0px !important; } table { margin: 0px !important; }：

{{1}}

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

Answer 4

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

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

Answer 5

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

<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中的填充/边距值。

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

Answer 6

由于展望不支持保证金 - 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>

Answer 7

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

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

＆＃34;在Outlook 2007,2010和2013中修复强制正文填充

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

这打破了设计并在上造成了不必要的空白   电子邮件的左边距。 Outlook支持的违规版本   保证金（包括负保证金）但仅支持内联样式。所以   修复/黑客是将整个电子邮件包装在包装表中并应用   仅使用有问题的电子邮件客户端负边距 - 使用html'if   语句'如下所示。＆＃34;

<!--[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>

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

7 个答案: