html 电子邮件在 yahoo 和 Outlook 中看起来很糟糕，但在其他所有方面都很好答案

【问题标题】：html e-mail looks bad in yahoo and outlook but fine on everything elsehtml 电子邮件在 yahoo 和 Outlook 中看起来很糟糕，但在其他所有方面都很好
【发布时间】：2015-03-12 12:50:10
【问题描述】：

简单地说：我有一封从 psd 导出的 html 电子邮件。切片图层和所有内容，更改网址等等，所以我做了一个测试邮件，html邮件在大多数客户端上看起来都不错，但是当我将它发送到雅虎邮件或hotmail/outlook并从chrome打开它们时，所有的图像在那里，但它们的位置是错误的。我究竟做错了什么？全部在表格中，没有外部 CSS 或头部没有样式。

<head></head>

现在有了 jsfiddle 的要求

这是 html https://jsfiddle.net/waev6gdu/

在 jsfiddle 上看起来不错，但在上述客户端上却不行。我做错了什么？

【问题讨论】：

电子邮件是戏剧性的......尝试将style="display:block"添加到代码中的每个img。
该死的，现在它在 mac 上坏了。 jsfiddle.net/6oxwgn6q 很高兴看到它在 gmail 浏览器中运行。
从代码中大量的行跨度和列跨度来看，您似乎是通过一些 Photoshop 或 Brackets 插件导出的。如果我错了，请原谅我，但如果我错了，请不要要求人们修复它。除了预先构建的模板之外，真的没有任何 HTML 电子邮件开发的捷径。
是的，我通过 photoshop 导出了它，但我也四处寻找预先构建的模板，但找不到任何 a)免费 b)有像我这样的布局。

标签： html css email

【解决方案1】：

您好，我建议您在 td 标签内使用表格作为主要布局和 div

类似

<table>
<tr>
    <td>
        <!-- header -->
        <div style="width:50%;margin:50px;"></div>
        <div></div>
        <div></div>
    </td>
</tr>
<tr>
    <td>
        <!-- main content -->
        <div></div>
        <div></div>
        <div></div>
    </td>
</tr>
<tr>
    <td>
        <!-- footer -->
        <div></div>
        <div></div>
        <div></div>
    </td>
</tr>

【讨论】：

【解决方案2】：

可能值得看一下https://www.campaignmonitor.com/css/，它将向您展示哪些客户端支持某些 css 属性。电子邮件开发很棘手，但像 Litmus 这样的工具也可以帮助进行测试。

对于图像，这样的结构可能会有所帮助：

<tr>
    <table cellpadding="5" cellspacing="0" border="0">
        <tr>
            <td>
              <img border="0" src="images/image.png" width="107" height="107">
            </td>
        </tr>
    </table>
<tr>

在表格中使用表格，有助于电子邮件开发。

【讨论】：

他在模板中使用的 CSS 完全为零。虽然我同意 Campaign Monitor 的指南是一个很好的指南，但它在这里根本没有任何意义。
上面的例子在电子邮件中不起作用，原因很简单，图片来源是相对的。

【解决方案3】：

我查看了您的问题，发现有几个重要的问题会阻止您解决此问题。您应该花时间阅读我的 cmets，我是 CSS::Inliner for Perl 的作者，我在日常工作中每天都会处理类似您的问题。

您正在尝试使用基于图像的电子邮件。这种性质的电子邮件自然会被许多邮箱提供商过滤。这种技术被垃圾邮件发送者严重滥用，原因很明显，您无法轻松分析和检查图像的文本内容。结果，它已成为各种过滤器的巨大危险信号。我强烈建议您避免使用此技术，因为它不仅会导致此广告系列的参与度较低，而且可能会对您的出站声誉造成长期损害（即未来会出现更多问题）。
您依赖 Adobe 为您自动设置模板格式。很遗憾，Adobe 公司对如何构建正确的 HTML 电子邮件知之甚少。他们的工具完全错误地用于这项任务，继续使用它们将导致渲染一致性非常差。 AFAIK 没有很好的自动化工具来做你想做的事情，它必须手工完成，而且非常困难。
您依靠手动测试来确定您的电子邮件是否正确呈现。我不能强调这种方法是多么无用。你根本无法想象在野外有多少不同的用户代理。我们谈论的是 50 个，这只是主要参与者 - 还有许多其他较少的参与者，你也应该关注（Android，我在看着你）。我强烈建议你看看 Litmus 或 Email On Acid，它们的价格都很合理，而且做得比较好。
您希望这很容易。它不会。有这么多电子邮件公司是有原因的，因为这是一项非常艰巨的注重细节的工作。没有一个简单的按钮可以为您处理这个问题。如果这是您的首选行动方案，您应该聘请第三方来帮助您完成电子邮件。

【讨论】：

除了图片方面，这很有帮助，谢谢。我也在石蕊上测试过它。这就是我在这里的原因。 :) 它只在苹果邮件、outlook 2007、2010 和 2013 上看起来很糟糕。休息很顺利。至于为什么图像建议没有帮助？好吧，因为那个大中间图像就在那里？在这里留下来 :) 我只能摆脱标题和底部图像并将它们制作为 html 文本。但是那个大胖子的形象一定要留下来。
拥有图像不是问题 - 但撰写整个图像电子邮件是一个问题。您需要在文本和图像之间建立平衡才能通过过滤器。如果您觉得我的帖子有帮助，请点赞。