使用 CSS 的 HTML 电子邮件答案

【问题标题】：HTML Email using CSS使用 CSS 的 HTML 电子邮件
【发布时间】：2010-11-14 11:14:45
【问题描述】：

我正在尝试使用 DIV 而不是表格来构建 HTML 电子邮件，而且我对 CSS 很陌生。

我想要达到的效果类似于：

*******************   XXXXXXXXXXXX   XXXXXXXXXXX
*   image here    *   XXXXXXXXXXXX   XXXXXXXXXXX
*******************   XXXXXXXXXXXX   XXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

X = 一些文字

1 张图片 + 5行文字

有什么想法吗？

【问题讨论】：

每个子部分中的文本是否是另一个子部分中文本的延续？如果是这样，这些方框按什么顺序填充？（我想象一个中顶框、一个右顶框和一个底框）。
思南，它们是子部分

标签： html css email

【解决方案1】：

电子邮件是您对良好布局实践的任何想法都应该被抛弃的地方之一。很多很多电子邮件提供商都会过滤掉您输入的任何 CSS 规则，因此如果您绝对想要在电子邮件中使用“复杂”的布局，最好的办法就是坚持使用老式表格，因为它们会让您最接近您的电子邮件正确交付给您的所有用户。

【讨论】：

我是一名 CSS 合规拉拉队队长/狂热者，很遗憾我不得不同意。
Gmail 尤其只允许使用 style 属性应用的 CSS。
另外，我建议您避免创建不依赖图像来传达其信息的设计，因为默认情况下大多数用户不会接受图像。

【解决方案2】：

可能对您有用的资源：

Email Standards Project（包括 a list of clients 及其支持/不支持的功能 - Gmail 和 Outlook 2007 可能是最讨厌的）
Campaign Monitor's resources page（有一个不错的 CSS 支持矩阵）
Campaign Monitor's automatic e-mail tester（付费服务）

【讨论】：

Gmail 和 Outlook 是我们发送的每封电子邮件通讯的祸根。如果不借助表格和内联 CSS，几乎不可能在两者之间取得良好的平衡。

【解决方案3】：

精心设计的电子邮件非常棘手。一般来说，您可以假设电子邮件客户端不会拉入外部链接的 CSS 文件（或至少不正确），并且他们将对您的 HTML 执行一些操作（通常只是属性并添加一些额外的标记）。但这不是坚持所有最佳实践的地方，当然也不是“学习”良好标记或 CSS 设计的地方。

一般来说，HTML 电子邮件遵循最糟糕的网页设计规则。要记住的两件大事是：

使用 HTML 表格进行复杂布局（任何带有列的内容）
使用内联 CSS 样式（即使是嵌入的 CSS 样式——那些放在文档头部的样式——在大多数电子邮件客户端中也可能无法正确呈现）

推动您的客户放弃花哨的电子邮件简报，转而使用设计精良的纯文本电子邮件也是一个好主意，这种电子邮件在更广泛的平台上更易于访问。将用于访问电子邮件的移动设备的兴起作为这样做的主要原因，尽管对最终用户的好处是深远的。

This SitePoint article 很好地总结了这个方法。

【讨论】：

移动设备的兴起是由于像 iPhone 这样的设备完全能够显示 HTML 电子邮件。尽管如此，其余的 +1。

【解决方案4】：

电子邮件客户端中的 CSS 支持不是很标准化。使用 html 4 属性代替 CSS 来处理您的 HTML 电子邮件是普遍接受的。

【讨论】：

【解决方案5】：

作为一家大型广告公司的员工，为大牌客户发送大量 html 电子邮件，我会说他们很乱！

使用嵌套表格进行布局。我什至使用白色（或电子邮件背景颜色）1x1 像素间隔图像来处理几乎所有的间隙和东西（因为填充和边距并不总是能正常工作。）

正如一些人之前所说，内联样式是您唯一可以依靠的样式，但即使使用这些样式，“背景图像”也会被大量忽略。

只要客户没有请求任何类型的动态文本，我的大部分文本也会使用图像，以避免出现任何字体或大小问题。

见鬼，如果可以的话，把东西剪成几张大图然后发送出去。

【讨论】：

【解决方案6】：

每个人的反应都很好。 Campaign Monitor 和 http://www.email-standards.org 是目前最好的资源。

但是，当我写第一封 html 电子邮件时，一位开发人员告诉我 - “代码就像 1997 年一样”。

【讨论】：