Question

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

<head></head>

现在有了jsfiddle的要求

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

在jsfiddle上看起来很好但在上述客户端却没有。我做错了什么？

Answer 1

您好我建议您使用表格进行主要布局和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>

Answer 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>

使用表格中的表格可以帮助完成电子邮件开发。

Answer 3

我查看了您的问题，并注意到一些重要问题会阻止您为此工作。你应该花点时间阅读我的评论，我是Perl的CSS :: Inliner的作者，我每天都在处理你的问题。

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

在雅虎和Outlook中，html电子邮件看起来很糟糕，但其他一切都很好

3 个答案: