在设计具有合理期望的电子邮件时，应采取哪些适当做法，以使其在 Outlook 2003、2007 和 Web 邮件客户端中正确显示？我订阅了各种电子邮件通讯并查看了它们的源代码，并看到其中一些有 2000 行 HTML 和 CSS 以及我以前从未见过的 IF 语句（我假设与确定 Outlook 的版本有关）。
是否有可用于创建标记的免费或商业工具？有没有关于如何应用我见过的这些巨大样式表的标准模式？
【问题讨论】：
电子邮件设计是一场噩梦，因为 Microsoft 为新版本的 Outlook 采用了 Word HTML 引擎。没有我知道的工具，但本指南将在您尝试破译哪些客户端支持哪些 CSS 时为您提供帮助：
【讨论】：
【讨论】：
由于三个原因，HTML 无法在电子邮件中成功实现。
1) HTML 设计为仅适用于 HTTP 协议 (web) 而不是 SMTP 协议 (email)。这一点很清楚，因为 HTML 文档的头部根据 HTTP 传输提供与文档处理相关的数据。由于 HTML 不符合 SMTP 协议提供的条件，因此它表面上是兼容的。到目前为止，还没有任何类型的标准来描述电子邮件中的内容格式。
2) HTML 不是一种表示语言。 HTML 旨在为内容提供结构化的元数据，而不是用于呈现。 HTML 仅在电子邮件中用于演示，因此经常被滥用和完全违反标准使用。
3) 电子邮件中的单个文档可以有多个作者，每个作者都有独立的标题信息。这样的文档称为电子邮件线程。 HTML 没有这样的约定。当在电子邮件中提供 HTML 时，接收它的初始用户可能看起来不错，但在回复或转发时，它看起来像垃圾并且无法完成它的工作，这可能无论如何都不会做。据我所知，邮件标记语言是唯一一种包含功能的标记语言，可以解决和服务于单个标记语言文档的多个作者贡献而不会发生冲突，这是准确支持电子邮件线程所必需的。
这三个原因是 HTML 与电子邮件完全不兼容且无法成功的原因。
【讨论】：
要让电子邮件在所有客户端上都能正常工作是极其困难的，因为它们使用的渲染引擎与 Web 浏览器不同，而设计很可能是在其中开发的。尝试使用 LitmusApp 的电子邮件测试服务，它会为您提供电子邮件在不同电子邮件客户端中的显示方式的屏幕截图。
【讨论】：
哦。如此可怕的答案。
看到了吗？当每个人都认为使用表格而不是 css 是某种禁忌时，就会发生这种情况。每个人都用这种 CSS 的傲慢和精英主义来限制自己。当一个人只有一把锤子时，一切看起来都像钉子。难以置信。
一位发帖人写道：“这是我的出发点，即使这样也不可靠，即使是具有固定宽度的简单单列表格也会在表格单元无缘无故地扩展超过宽度的情况下变得混乱。”
固定宽度给您带来了麻烦。一个 600 像素的固定宽度表格显然会比一个 400 像素的电子邮件查看窗口/区域更宽。它不会扩展更宽，它IS更宽。 [嘘]
无法预测收件人的电子邮件查看窗口/区域的宽度。因此，创建一个表格，但将其宽度设置为 100%，而不是一定数量的像素。并将其高度设置为“自动”。让它的内边距又好又宽……至少 7 到 10 像素。
然后像往常一样在该表中执行所有操作，但坚持使用普通 HTML4，避免使用 XHTML、DHTML、XML、java、javascript 等，仅使用 HTML4。也没有 CSS。只是 HTML4。期间。
使用网络服务器上可以使用普通 http:// URL 链接到的图像，然后使用普通 img 标签链接到它们，放置图像的整个 URL（包括 http://部分）在引号之间，如...
src="http://www.website_url.com/filename.jpg"（或 .gif 或其他）
...避免使用“alt”功能或任何花哨的东西。
如果您想严格控制字体大小，请不要犹豫，使用“span”标签，因为它几乎适用于所有电子邮件客户端......只是不要太花哨。
另外，不要让你的图片太大...特别是，不要让“标题”或顶部图片太宽。如果图形保持 600 像素宽且收件人的电子邮件查看器为 400 像素宽，将表格宽度设置为自动不会有太大帮助。使用可以很好地嵌套在电子邮件最左上角的图形；并使用相当小的照片和其他图形。
执行所有这些操作，您应该会发现电子邮件在几乎每个电子邮件客户端中看起来都一样。使用...进行仔细检查。
http://litmusapp.com/email-previews
...作为另一张海报，在这里，建议。
希望对您有所帮助。
【讨论】：
在创建合理的跨客户端兼容电子邮件方面肯定有一些最佳实践。
要记住的最重要的两个概念是：
仅使用内联 CSS。这将为您省去很多麻烦，因为 Gmail 和许多其他电子邮件客户端因在
正如许多人已经说过的，表格是调整元素大小的方法（而不是 CSS）。
如果您有兴趣，我实际上只是在这个主题上写了一些最佳实践的帖子：
http://www.versapay.com/developer-blog/the-art-and-science-of-email-rendering-across-email-clients/
【讨论】：
我会推荐一个基于预处理器的框架，例如Foundation for Emails。
【讨论】：