Outlook HTML电子邮件 - 图像切片中的垂直间隙

因此，典型的问题。我在这里搜寻了一艘船。尝试了一切建议。 Nutin'Outlook HTML电子邮件 - 图像切片中的垂直间隙

所以也许会问这个问题新鲜。

我在我的图像切片之间的Outlook 2013（和2007我也认为）有一些verical间隙。（也是我的文字延伸得比它设置的更远）

知道display：block并不适用于Outlook。我已经尝试了跨度包裹并给跨度显示：块

我很茫然。我希望有人能够轻松回答这个问题。 Grrrrr !!!!外表！你为什么要这么受欢迎？

http://pastebin.com/ESfEmWer http://tinypic.com/r/2gtdhu1/6

2013-04-02 BMCwebdev

谢谢你的建议。我尝试使用display：inline-block确保border-collapse：collapse;是财产集，甚至拿出所有的空白，以确保http://pastebin.com/aeTBi9kw仍然得到这些差距看到的图像http://tinypic.com/r/2gtdhu1/6这是一个头刮。我离开了显示器：因为它们帮助Gmail弥合了横向差距。 – BMCwebdev

你造成的差距一吨的空白：

<a href="mms://a1783.v167326.c16732.g.vm.akamaistream.net/7/1783/16732/0/QPS.Onstreammedia.com/origin/jjready2/%5bInbox%5d/Talent%20Management/CDF%201-18_WMV.wmv"> 
          <img style="display:block" src="http://emaniocreative.com/eblasts/3_26_2013/Message-from-Dominic-&-Louise.jpg" width="360" height="257" border="0" alt="Message from Dominic &#38; Louise - Video"></a>

尝试采取空白了..也display:block并不像display:inline-block工作（以后你可能就要）您不能将格式如margin或padding添加到SPAN。我会保留你拥有的IMG和DIV元素，但是如果您使用的是TABLE，则可能需要border-collapse:collapse;属性集。

另外要注意，如果你正在使用display:inline-block你要拿出ALL空白的元素之间：

<tr>...</tr><tr>...</tr>

而不是你有什么目前：

<tr> 
    ... 
</tr> 
<tr> 
    ... 
</tr>

来源

2013-04-02 20:36:46

别t去

display: [anything]

如果你希望包括Outlook 2007.请参阅http://www.xequte.com/support/maillistking/css_in_emails.html以了解哪些CSS样式可供您使用，哪些您最好不要。

不要使用任何空格尾随

<td>

，不要使用任何空格前面

</td>

而且你也应该避免

<style>...</style>

，因为这将最有可能将被完全剥离。总是去内联样式。而且我知道这不是真正答案的一部分，而只是一个提示：如果您正在制作HTML新闻稿，那么就好像您正在为Internet Explorer 4做的那样。电子邮件客户端（如Outlook）使用最荒谬的CSS-渲染器，你可以想象。即使Internet Explorer 5在呈现CSS和现代Outlook方面也更加复杂。

哦，顺便说一下：如果您的简报的收件人有机会在hotmail，gmx或gmail上在线阅读它们，那么您也应该检查它们。你会对这些在线客户端如何处理你的代码以及他们注入的内容感到敬畏。

来源

2013-04-02 21:05:15 hurrtz

你有太多的colspans，这可能会导致问题。您应该嵌套您的表格。

我已经创建了数百封电子邮件，并且从未对由电子邮件代码中的换行引起的空白有任何问题。（Outlook 2007是我检查我的电子邮件的第一件事）

使用display:block;并始终保留自己的图像<td>。

尝试这样代替：

<html> 
<head> 
<title>Ambassador Newsletter</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style>img {display:block}</style> 
</head> 

<!--REPLACE the following text with the path to the images on your server http://emaniocreative.com/eblasts/3_26_2013/ --> 

<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#ebebeb" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;"> 
<table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border-collapse: collapse;"> 
    <tr> 
     <td> 

<!-- NEST A TABLE INSTEAD--> 
     <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#770000"> 
     <tr> 
      <td style="padding:20px;"> 
      header 
      </td> 
     </tr> 
     </table> 
<!-- /NEST--> 

    </td> 
    </tr> 
    <tr> 
     <td> 

<!-- NEST A TABLE INSTEAD--> 
     <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td style="padding:20px;"> 
      Body section 1 
      </td> 
     </tr> 
     <tr> 
      <td style="padding:20px;"> 
      Body section 2 
      </td> 
     </tr> 
     </table> 
<!-- /NEST--> 

     </td> 
    </tr> 
</table> 

</td></tr></table></td></tr></table></body></html>

在我的例子我用填充，而不是细胞间距。

您从不需要空白的间隔图像。在空单元格使用 代替，如果你不喜欢使用填充：

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#770000"> 
    <tr> 
     <td height="20" colspan="3"> 
     &nbsp; 
     </td> 
    </tr> 
    <tr> 
     <td width="20"> 
     &nbsp; 
     </td> 
     <td width="610"> 
     header 
     </td> 
     <td width="20"> 
     &nbsp; 
     </td> 
    </tr> 
    <tr> 
     <td height="20" colspan="3"> 
     &nbsp; 
     </td> 
    </tr> 
    </table>

在一个侧面说明，从Outlook转发时（例如Gmail），（MSO的礼貌有垂直间隔不可回避的问题正常的p标签添加），但对于最初的收件人没有问题。

来源

2013-04-04 17:32:36 John

Outlook HTML电子邮件 - 图像切片中的垂直间隙

回答

相关问题