Question

我正在使用HTML和CSS制作电子邮件简报。它都在表中没有div或复制或边距或填充。它在gmail中工作正常，但在hotmail中测试时，我在行之间得到一个空格。我的所有行都在其单元格中有图像，其中大多数都链接到一个站点。我尝试了不同的CSS，如显示：阻止和崩溃，但没有运气......任何想法？

这是我的代码：

<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */

/* Reset Styles */
*, body {
    padding:0;
    margin:0;
    border:0;
    border:none;
    outline:none;
    font-size: 0px;
}
img, a img  {
    border:0;
    border:none;
    text-decoration: none;
    padding:0;
    margin:0;
    display:block;
}
table tr, table td, table th { border: 0; margin: 0; padding: 0; }
table, table td {
    border-collapse: collapse;
}
#backgroundTable {
    height: 100% !important;
    margin: 0;
    padding: 0;
    width: 100% !important;
}
p {
   margin: 1em 0;
}
h1, h2, h3, h4, h5, h6 {
   color: black !important;
   line-height: 100% !important;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   color: blue !important;
}

h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
       color: red !important; /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
   }

h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
   color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
   table td {
   border-collapse:collapse;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;} 

/* Template Styles */
body, #backgroundTable {
    background-color: #000000;
}

</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-HEADER.png" alt="Header" /></a></td>
  </tr>
  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-PROMO.png" alt="Content" /></a></td>
  </tr>

  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-NOTE.png" alt="Note" /></a></td>
  </tr>
    </table></td></tr>
  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="600">
      <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="469"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-FOLLOW.png" alt="Follow Us" /></td>
       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="30"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-FACEBOOK.png" alt="Facebook" /></a></td>

       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="33"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-TWITTER.png" alt="Twitter" /></a></td>

       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="30"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-YOUTUBE.png" alt="YouTube" /></a></td>

       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="38"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-SPACE02.png"  alt="Follow Us" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-RIGHTS.png" alt="Copyright" /></td>
  </tr>
   </td>
  </tr> 
  </table>
  </td>
  </tr>
</table>
</center>
</body>
</html>

Answer 1

scrappedcola是对的......你需要为eDM使用内联样式。

此处列出了有关不同电子邮件客户端支持内容的一些有用信息：http://www.campaignmonitor.com/css/

您还可能希望运行石蕊测试，以确保您的电子邮件正确显示给所有主要电子邮件客户端：http://litmus.com/

Answer 2

我已经检查了你的代码，并且有一些我想为你标记的东西，你应该看一下。

财产，支持/不支持的客户

width CSS属性 RISKY Outlook 07，Notes 6，的Eudora
background-color CSS属性 POOR Notes 6，Eudora
margin CSS属性 RISKY AOL 9，Notes 6，Eudora， Live Mail，Hotmail
填充CSS属性 POOR Notes 6，Eudora
border CSS property POOR Notes 6，Eudora
border-collapse CSS属性 RISKY Entourage 2004，Notes 6，Eudora
height CSS属性 RISKY Outlook 07，Notes 6， Eudora，Old GMail
显示CSS属性 POOR Outlook 07，Eudora

我建议您删除所有嵌入式样式，因为有些样式不会在各种浏览器/电子邮件客户端中被选中并将它们内联。内联样式工作得更好，并且对于跨浏览器使用更稳定，似乎电子邮件模板通常只使用一次或稍微改变以适应不同的EDM。这意味着将你的风格内联放入是非常安全的：

e.g。

<div style="color:red; width:100px; border:1px solid green;"></div>

希望这有帮助。

Answer 3

当我遇到类似的问题时，我添加到 td ：

valign="top" align="left"

和 img ：

style="border:none; vertical-align:top"

以下是一个例子：

<td valign="top" align="left"><a href="#"><img style="border:none; vertical-align:top" src="#" /></a></td>

我希望这会有所帮助。

Answer 4

您可以更好地编写内联css，而不是将其放在样式标记中。 IE删除标题，并在渲染过程中添加自己的元素。类似于1990年的代码。测试的一个好方法是在Outlook中打开您的电子邮件，然后在“另存为”网页中打开并在浏览器中打开。你可以看到确切的破坏前景。

msdn.microsoft.com/en-us/library/office/...关于如何使用带有Outlook的css的官方消息（又名“MSFT讨厌网络开发者多少”）

行之间的空间w / hotmail电子邮件通讯中的图像

4 个答案: