0

我正在制作仅使用 HTML 和 CSS 的电子邮件通讯。它都在表格中，没有 div 或副本、边距或填充。它在 gmail 中运行良好，但在 hotmail 中进行测试时，行之间有一个空格。我所有的行在其单元格中都有图像，其中大多数链接到一个站点。我尝试了不同的 CSS，例如 display:block 和 collapsing 但没有运气......有什么想法吗？

这是我的代码：

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

4 回答 4

2

当我遇到类似问题时，我添加到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>

我希望这有帮助。

于 2013-02-04T15:13:08.477 回答
2

I have checked your code and there have been a few things i would like to flag for you that you should have a look at.

Property, Support/Unsupported clients

  1. width CSS property RISKY Outlook 07, Notes 6, Eudora
  2. background-color CSS property POOR Notes 6, Eudora
  3. margin CSS property RISKY AOL 9, Notes 6, Eudora, Live Mail, Hotmail
  4. padding CSS property POOR Notes 6, Eudora
  5. border CSS property POOR Notes 6, Eudora
  6. border-collapse CSS property RISKY Entourage 2004, Notes 6, Eudora
  7. height CSS property RISKY Outlook 07, Notes 6, Eudora, Old GMail
  8. display CSS property POOR Outlook 07, Eudora

I would suggest you remove all your embedded styles as some are not picked up in various browsers/email clients and place them inline. Inline styles work better and are more stable for cross browser use, and seems email templates are generally only used once or altered slightly for varying EDM's. This means that is is very safe to put al your styles inline:

e.g.

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

Hope this helps.

于 2013-01-25T00:01:06.557 回答
2

scrappedcola 是对的……您需要为 eDM 使用内联样式。

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

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

于 2013-01-24T23:32:35.040 回答
1

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

msdn.microsoft.com/en-us/library/office/... 关于如何在 Outlook 中使用 css 的官方说法（又名“MSFT 多么讨厌 Web 开发人员”）

于 2013-01-25T16:12:28.527 回答