Html 如何设计跨客户端/浏览器兼容的电子邮件？

在设计一封电子邮件时，合理预期它将在Outlook 2003、2007和webmail客户端中正确显示，正确的做法是什么？我订阅了各种新邮件，并查看了它们的源代码，看到其中一些有2000行HTML和CSS以及我以前从未见过的IF语句（我假设与确定outlook版本有关）

---

是否有免费或商业工具可用于创建标记？对于如何应用我见过的这些巨大的样式表，是否有一个标准模式？

为电子邮件设计是一场噩梦，因为Microsoft在较新版本的Outlook中采用了Word HTML引擎。据我所知，目前还没有工具，但本指南将为您提供帮助，帮助您理解客户机支持哪些CSS：

• 保持宽度相当窄（大约600像素）
• 使用表格而不是CSS div
• 确保它在IE6中工作

  ---

HTML无法在电子邮件中成功实现，原因有三

1） HTML仅适用于HTTP协议（web），而不适用于SMTP协议（电子邮件）。这一点很清楚，HTML文档的头部根据HTTP传输提供与文档处理相关的数据。由于HTML不符合SMTP协议提供的条件，因此它表面上是兼容的。到目前为止，还没有任何形式的标准来描述电子邮件内容的格式

2） HTML不是一种表示语言。HTML旨在为内容提供结构化元数据，而不是用于表示。HTML仅在电子邮件中用于演示，因此经常被滥用，完全违反了标准

3） 电子邮件中的单个文档可以有多个作者，每个作者都有独立的标题信息。这样的文档称为电子邮件线程。HTML没有这样的约定。当HTML在电子邮件中提供时，最初收到它的用户可能会觉得它很好，但当回复或转发它时，它看起来像垃圾，无法完成它的工作，这可能无论如何都做不到。据我所知，Mail Markup Language是唯一一种标记语言，它包含一些功能，可以在一个标记语言文档中处理和服务多个作者的贡献，而不存在冲突，这是准确支持电子邮件线程所必需的

---

这三个原因就是HTML与电子邮件完全不兼容且无法成功的原因。

要使电子邮件在所有客户机上都能正常工作是非常困难的，因为它们使用的呈现引擎与web浏览器不同，而web浏览器可能是在web浏览器上开发的。尝试使用LitmusApp的电子邮件测试服务，该服务将为您提供电子邮件在不同电子邮件客户端中的显示截图。

Oy。如此糟糕的答案

看到了吗？当每个人都认为使用表而不是css是某种禁忌时，就会发生这种情况。每个人都在用这种傲慢和精英主义来限制自己。当一个人只有一把锤子时，一切看起来都像钉子。难以置信

---

一张海报写道：“这是我的出发点，即使这样也不可靠，即使是一个固定宽度的简单单列表格，如果表格单元格毫无理由地超出宽度，也会出现混乱。”

固定宽度是让你陷入麻烦的原因。一个600像素的固定宽度表格显然要比一个400像素的电子邮件查看窗口/区域更宽。它没有扩展得更宽，而是更宽。[嘘]

无法预测收件人的电子邮件查看窗口/区域的宽度。因此，创建一个表，但将其宽度设置为100%，而不是一定数量的像素。并将其高度设置为“自动”。使其填充物美观且宽。。。至少7到10像素

然后像平常一样在表中做所有的事情，但是坚持使用普通的HTML4，避免使用XHTML、DHTML、XML、java、javascript等等，而只使用HTML4。也没有CSS。只是HTML4。句号

使用web服务器上某个位置的图像，这些图像可以使用正常的http://URL链接，然后使用正常的img标记链接到它们，将图像的整个URL（包括http://part）放在引号之间，如中所示

src=”http://www.website_url.com/filename.jpg“（或.gif或任何内容）

…并避免使用“alt”功能或任何花哨的东西

如果您想严格控制字体大小，那么请毫不犹豫地使用“span”标记，因为它几乎适用于所有电子邮件客户端。。。只是不要太喜欢它

也不要让你的图像太大。。。特别是，不要使“标题”或顶部图像太宽。如果图形保持600像素宽，而收件人的电子邮件查看器为400像素宽，则将表格宽度设置为“自动”不会有多大帮助。使用一个能很好地嵌套在电子邮件最左上角的图形；并使用相当小的照片和其他图形

做了所有这些，你会发现几乎每个电子邮件客户端的电子邮件看起来都是一样的。通过使用

…正如另一张海报所建议的那样

---

希望这能有所帮助。

在创建合理的跨客户端兼容电子邮件方面，肯定有一些最佳做法

需要记住的两个最重要的概念是：

只使用内联CSS。这将为你省去很多麻烦，因为Gmail和许多其他电子邮件客户端在标签中加入CSS会让你窒息

正如许多人已经说过的，表格是调整元素大小（而不是CSS）的方法

事实上，我刚刚就这个主题写了一篇文章，其中有一些最佳实践，如果您感兴趣的话：

---

我建议使用基于预处理器的框架，如。

使用纯文本-与所有内容兼容。：-）虽然我很喜欢你的回答，但我们的公司喜欢漂亮的电子邮件！Telerik链接到此pag