html - 如何使 html 电子邮件看起来与在浏览器中预览的完全一样？

Question

我正在处理一个 HTML 电子邮件模板，我注意到我在浏览器中获得的预览与我在电子邮件收件箱中实际获得的有些不同。就像有时您可能在浏览器中让两个表格彼此对齐，但在您收到的电子邮件中，它们可能不再对齐并且存在一些小差异。

所以我只想知道是否有可能使在浏览器中预览的 html 电子邮件与您在收件箱中收到的完全相同。我知道这肯定与每个单独的电子邮件服务提供商有关，它们有自己的默认 css 或诸如电子邮件之类的东西，还有您使用的浏览器和操作系统。但是是否有可能至少在一种电子邮件服务(例如 gmail)中确保无论您使用的是什么浏览器或操作系统，每次您预览的内容都是您在收件箱中收到的内容？有多难？

Answer 1

简要回答您的问题:

不，我不认为可以在浏览器中预览 HTML 电子邮件并将其显示为好像在特定电子邮件客户端(例如 Microsoft Outlook 或 Gmail)中呈现的一样。虽然这不是解决方案，但我能想到的最类似的功能是能够 use the User Agent of another web browser within Google Chrome's developer tools .

更新(2013 年 5 月 31 日):以下内容也可能在处理 HTML 电子邮件时提供有用的指南。

1. http://rodriguezcommaj.com/blog/The-Little-Guide-To-HTML-Email

2. http://rodriguezcommaj.com/modern-html-email

包含上下文和有用资源的更详细答案:

这是一个非常具有挑战性且常常令人沮丧的问题。它在很大程度上类似于 Web 开发人员不断处理的跨浏览器兼容性问题。但是，存在一些主要差异:

• 虽然只有五种主流浏览器，但有 20 多种流行的电子邮件客户端。

• 此外，W3C 极大地帮助了浏览器实现自身标准化。这个过程一直很缓慢，但比迄今为止在电子邮件客户端中看到的任何标准化都快得多。

例如，this article讨论了 2007 年电子邮件客户端标准化的重大挫折，它至今仍影响着我们。它还简洁地总结了这个问题:

"While the IE team was soothing the tortured souls of web developers everywhere with the new, more compliant Internet Explorer 7, the Office team pulled a fast one, ripping out the IE-based rendering engine that Outlook has always used for email, and replacing it with … drum roll please … Microsoft Word".

上述文章还引用了微软提供的一个工具:2007 Office System Tool: Outlook HTML and CSS Validator . Microsoft 还提供了以下文档来帮助设计人员和开发人员完成支持 Outlook 较差标准支持的任务:

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 Part 1
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 Part 2 .

除了将测试 HTML 电子邮件发送到您自己的电子邮件客户端(基于 Web 或桌面)之外，测试几乎所有流行电子邮件客户端的最佳方法是使用以下电子邮件服务之一。每个都提供了在大约 20 个左右的电子邮件客户端中预览电子邮件模板的能力。排名不分先后，它们是:

GetResponse
Litmus
Mail Chimp
Campaign Monitor
Email on Acid

如果您正在寻找免费选项，可以使用 Premailer它通过简单地剥离标签来提供预览，因为大多数电子邮件客户端对 CSS 的支持有限。例如，据我所知，Gmail 完全去除了内联和外部引用的 CSS。

此外，如果您想知道哪些客户拥有最多的市场份额，请引用以下两个快速估算:

Litmus Email Client Stats
Campaign Monitor Email Client Stats

祝你好运，我希望这对你有所帮助!