1

所以，典型的问题。我在这里搜索了一船。尝试了所有建议。坚果

所以也许要问新鲜的问题。

我的图像切片之间的 Outlook 2013（我认为也是 2007 年）中存在一些严重的差距。（我的文字也比它设置的更远）

知道 display:block 并不真正适用于 Outlook。我试过包装跨度并给跨度一个显示：块

我不知所措。我希望有人可以轻松回答这个问题。咕咕咕！！！！外表！为什么一定要这么受欢迎？

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

4

3 回答 3

2

不要去

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 中在线阅读它们，那么您也应该检查它们。你会惊叹不已，想知道那些在线客户端如何处理你的代码以及它们注入了什么。

于 2013-04-02T21:05:15.143 回答
1

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

我已经创建了数百封电子邮件，并且从未遇到过由电子邮件代码中的换行引起的空白问题。（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>

在我的示例中，我使用填充而不是单元格作为间距。

您永远不需要空白间隔图像。&nbsp;如果您不想使用填充，请在空单元格中使用 a ：

  <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 标签提供），但对于初始收件人来说没有问题。

于 2013-04-04T17:32:36.297 回答
1

你有大量的空白导致差距：

<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（你可能想要的那样）你不能添加格式，例如marginorpadding到SPAN. 我会保留你所拥有的IMG和DIV元素，但是如果你使用的是TABLE你可能想要的border-collapse:collapse;属性集。

另请注意，如果您正在使用，display:inline-block您将需要删除元素之间的所有空格：

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

而不是你目前拥有的：

<tr>
  ...
</tr>
<tr>
  ...
</tr>
于 2013-04-02T20:36:46.343 回答