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

发布于 2024-10-30 01:15:51 字数 927 浏览 2 评论 0原文

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

看看这张图片：

在此处输入图像描述

粉色是 body 标签的背景颜色，灰色是 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;" >

干杯！

原文

I have a rich HTML email. I was wondering how, in Outlook 2010 and 2007, you get the table in the layout to sit flush with the edge of the browser?

Have a look at this pic:

enter image description here

The pink is the background color of the body tag and the grey is the bg of the table. They both have 0 everything (margin, paddting ect). But there is still some space. The pink should not be visible.

Does anyone know how to get rid of this space on the body?

Also here’s some CSS for the start of the email:

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

Cheers!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨后彩虹 2024-11-06 01:15:51

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

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

回复收藏 0 原文

时光匆匆的小流年 2024-11-06 01:15:51

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

如果您有 Word，您至少可以以 html 格式打开电子邮件并查看它如何呈现，而无需经历整个邮件周期。

Outlook 确实是任何电子邮件营销人员的克星。它绝对是一堆垃圾，甚至无法支持最基本的 CSS 期望。

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

回复收藏 0 原文

平生欢 2024-11-06 01:15:51

奇怪的是不起作用。

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

回复收藏 0 原文

羅雙樹 2024-11-06 01:15:51

尝试在标记上使用 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 标签。

Try using margintop="0" marginleft="0" marginright="0" on the <body> tag (updated to full example):

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

You will need to set the width of 600 to whatever the width of your email is.

There are cross-email client bugs with body tags, and padding/margin values in CSS.

NB - this is only necessary, and only works, on the body tag.

回复收藏 0 原文

不疑不惑不回忆 2024-11-06 01:15:51

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

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

table
{
  margin: 0px !important;
}

也许可以，但也许不行。我不确定 Outlook 如何处理 CSS...

With pure CSS (I'm not sure the makers of IE like reading that), you can use !important to force the margin and padding of the <table> and the <body> to be 0px:

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

table
{
  margin: 0px !important;
}

Maybe it'll work, but maybe not. I'm not sure how Outlook handles CSS...

回复收藏 0 原文

旧话新听 2024-11-06 01:15:51

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

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

As outlook doesn't support margin -reference. My work around to this issue was as below. Hope it will help someone.

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

回复收藏 0 原文

风柔一江水 2024-11-06 01:15:51

我知道这有点晚了，但我看到这篇文章并认为您也可以测试这个方法。

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 支持的违规版本
边距（包括负边距）但仅支持内联样式。所以
修复/破解是将整个电子邮件包装在包装表中并应用
仅向有问题的电子邮件客户端提供负边际 - 使用 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>

I know this is a bit late, but I came across this post and thought you might be able to test this method as well.

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

"Fixing the forced body padding in Outlook 2007, 2010 and 2013
Testing a html email recently with a high percentage of recipients
likely to be users of Microsoft Outlook I came across a bug where it’s
not possible to overwrite the forced body padding in versions of
outlook (which use MS Words rendering engine 2007, 2010, 2013).
This was breaking the design and causing unwanted whitespace on the
left margin of the email. The offending versions of outlook support
margin (including negative margin) but only support inline styles. So
the fix/hack is to wrap the entire email in a wrapper table and apply
negative margin to just the problematic email clients – using html ‘if
statements’ as below."

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

回复收藏 0 原文

~没有更多了~