Question

所以，典型的问题。我在这里搜索过一艘船。尝试了一切建议。 Nutin'

所以也许可以问这个问题。

我在我的图像切片之间的Outlook 2013（以及2007年我认为）中存在一些明显的差距。（此外，我的文字进一步扩展，而不是设置为）

知道display：block对Outlook不起作用。我已经尝试在跨度中包装并给跨度显示：块

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

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

Answer 1

不要去

display: [anything]

如果您希望包含Outlook 2007.请参阅http://www.xequte.com/support/maillistking/css_in_emails.html以获取可以使用哪些CSS样式以及哪些不需要的CSS样式的参考。

不要使用任何尾随空格

<td>

并且不要使用前面的任何空格

</td>

你也应该避免

<style>...</style>

因为这很可能完全被条纹化。总是选择内联样式。我知道这不是一个真实答案的一部分，但只是作为一个暗示：如果你正在做HTML新闻通讯，就好像你是为Internet Explorer 4做的那样。像Outlook这样的电子邮件客户端使用最荒谬的CSS-您可以想象的渲染器。甚至Internet Explorer 5在渲染CSS和现代Outlook方面也更为复杂。

哦，顺便说一句：如果您的简报的收件人有可能在hotmail，gmx或gmail中在线阅读，那么您也应该检查它们。你会敬畏，并想知道这些在线客户如何处理你的代码以及他们注入的内容。

Answer 2

你有大量的空白造成了这个空白：

<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或{{1}等格式到padding。我会保留您拥有SPAN和IMG元素的内容，但是如果您使用DIV，则可能需要设置TABLE属性。

另请注意，如果您使用border-collapse:collapse;，则需要在元素之间取出所有空格：

display:inline-block

而不是你现在拥有的东西：

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

Answer 3

你有太多的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.normal p标签），但初始收件人没有问题。

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

3 个答案: