Html hotmail电子邮件时事通讯中带图像的行间距_Html_Css_Newsletter

Html hotmail电子邮件时事通讯中带图像的行间距

html css

Html hotmail电子邮件时事通讯中带图像的行间距,html,css,newsletter,Html,Css,Newsletter,我正在做一个只使用HTML和CSS的电子邮件时事通讯。这些都在表格中，没有div、copy、margins或padding。它在gmail中运行良好，但在hotmail中进行测试时，行与行之间有一个空格。“我的所有行”的单元格中都有图像，其中大多数链接到站点。我尝试了不同的css，如显示：块和崩溃，但没有运气。。。有什么想法吗这是我的密码： <style type="text/css"> /* Client-specific Styles */ #outlook a{padding

我正在做一个只使用HTML和CSS的电子邮件时事通讯。这些都在表格中，没有div、copy、margins或padding。它在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>


/*特定于客户端的样式*/
#outlook a{padding:0；}/*强制outlook提供“浏览器中的视图”按钮*/
正文{宽度：100%！重要；}.ReadMsgBody{宽度：100%；}.ExternalClass{宽度：100%；}/*强制Hotmail以全宽显示电子邮件*/
正文{-webkit text size adjust:none；}/*阻止webkit平台更改默认文本大小*/
/*重置样式*/
*，主体{
填充：0；
保证金：0；
边界：0；
边界：无；
大纲：无；
字体大小：0px；
}
img，一个img{
边界：0；
边界：无；
文字装饰：无；
填充：0；
保证金：0；
显示：块；
}
表tr，表td，表th{边框：0；边距：0；填充：0；}
表，表td{
边界塌陷：塌陷；
}
#背景表{
身高：100%！重要；
保证金：0；
填充：0；
宽度：100%！重要；
}
p{
利润率：1米0；
}
h1、h2、h3、h4、h5、h6{
颜色：黑色！重要；
线高：100%！重要；
}
h1 a、h2 a、h3 a、h4 a、h5 a、h6 a{
颜色：蓝色！重要；
}
h1 a:激活，h2 a:激活，h3 a:激活，h4 a:激活，h5 a:激活，h6 a:激活{
颜色：红色！重要；/*最好与正常标题链接颜色不同。电子邮件客户端中对psuedo类的支持有限，添加此选项只是为了更好地测量*/
}
h1 a:访问，h2 a:访问，h3 a:访问，h4 a:访问，h5 a:访问，h6 a:访问{
颜色：紫色！重要；/*最好与正常标题链接颜色不同。电子邮件客户端中对psuedo类的支持有限，添加此选项只是为了更好地测量*/
}
表td{
边界塌陷：塌陷；
}
.yshortcuts、.yshortcuts a、.yshortcuts a:链接、.yshortcuts a:访问、.yshortcuts a:悬停、.yshortcuts a跨距{颜色：黑色；文本装饰：无！重要；边框底部：无！重要；背景：无！重要；}
/*模板样式*/
正文#背景表{
背景色：#000000；
}

报废可乐是对的。。。您需要为eDM使用内联样式

下面列出了有关不同电子邮件客户端支持的内容的一些有用信息：

您可能还需要运行litmus测试，以确保所有主要电子邮件客户端都能正确显示您的电子邮件：

我已经检查了您的代码，有一些事情我想为您标记，您应该查看一下

属性，支持/不支持的客户端

宽度CSS属性风险Outlook 07，注释6，尤多拉

背景色CSS属性差注释6，Eudora

边际CSS属性风险AOL 9，注释6，Eudora，实时邮件

填充CSS属性较差注释6，Eudora

边框CSS属性较差注释6，Eudora

边界塌陷CSS属性风险环境2004，注释 6，尤多拉

高度CSS属性风险Outlook 07，注释6，尤多拉，老GMail

显示CSS属性差Outlook 07，Eudora
我建议您删除所有嵌入的样式，因为有些样式在各种浏览器/电子邮件客户端中都没有被使用，并将它们放在内联位置。内联样式工作得更好，对于跨浏览器使用更稳定，而且似乎电子邮件模板通常只使用一次，或者对不同的EDM进行轻微更改。这意味着将所有样式内联是非常安全的：
e、 g

希望这能有所帮助。
编写内联css比将其放在样式标记中更幸运。IE去掉标题，并在渲染过程中添加它自己的元素。代码好像是1990年。测试的一个好方法是在Outlook中打开电子邮件，然后“另存为”网页并在浏览器中打开。你可以清楚地看到前景造成的巨大破坏

msdn.microsoft.com/en us/library/office/…关于如何在outlook中使用css的官方词汇（又称“MSFT有多讨厌web开发人员”）
当我遇到类似问题时，我将其添加到td中：
以及国际监测小组：
以下是一个例子：

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

我希望这会有所帮助。
编写内联css比将其放在样式标记中更幸运。IE去掉标题，并在渲染过程中添加它自己的元素。代码好像是1990年。测试的一个好方法是在Outlook中打开电子邮件，然后“另存为”网页并在浏览器中打开。你可以清楚地看到前景造成的巨大破坏。关于如何在outlook中使用css的官方说法（也就是“微软有多讨厌网络开发者”）@scrapsedcola谢谢，我会试试看。如果你需要进一步的帮助，请告诉我，我很乐意帮助你。在我之前的日子里，我做了整整一年的EDM。
valign="top" align="left"

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

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