html电子邮件上的速记CSS可能吗？答案

【问题标题】：Shorthand CSS on html emails possible?html电子邮件上的速记CSS可能吗？
【发布时间】：2011-04-21 12:57:27
【问题描述】：

我想知道 HTML 电子邮件是否允许速记 CSS 编码。

我知道允许的 CSS 非常有限，但我知道例如填充是允许的，但是否允许这样做：

padding:0 4px 0 6px;

【问题讨论】：

自己测试一下。
并考虑所有主要的电子邮件客户端 - 包括 Gmail、Hotmail 等网络邮件客户端......它们都有不同的处理 HTML 电子邮件的规则
您可以找到在线指南，例如Campaign Monitor's CSS for email clients。 “只是尝试一下”是一个非常耗时且繁琐的过程。
@JoelGlovier 在寻求免费帮助时，我们鼓励用户至少先做出最基本的最低限度的努力。这不仅为未来的访问者提供了一组更好的策划问答（请注意这个问题如何在八年内仅吸引了 2,000 名观众），而且通常只是一种礼貌的做法。希望对您有所帮助。

标签： html css html-email

【解决方案1】：

电子邮件中允许的 CSS 是接收电子邮件客户端所理解的内容。有许多不同的电子邮件客户端。并非所有人都渲染 HTML 电子邮件（尽管现在几乎所有人都这样做），但即使他们渲染 HTML，他们的渲染引擎也会彼此不同，就像 Web 浏览器一样。但与网络浏览器不同的是，如果人们对电子邮件客户端的呈现方式不满意，他们并不总是更换电子邮件客户端。

因此，您应该期望几乎可以使用任何类型的电子邮件程序来阅读您的电子邮件，包括根本不呈现 HTML 的程序，以及使用 IE4 老式呈现引擎呈现 HTML 的程序。

也就是说，我希望几乎所有电子邮件客户端都能正确解释 CSS padding 样式。

您可能会得到一些带有 quirks-mode 的盒子模型，这会导致您的盒子大小和位置错误，但他们仍应在自己的规则集内正确解释 padding。

我要说的一件事是，您应该确保所有 CSS 代码都嵌入到 HTML 中。在文档顶部放置一个大的<style> 标签，而不是带有外部引用的<link> 标签。原因是 1) 某些用户可能会在离线时查看您的电子邮件，在这种情况下，他们将无法加载外部样式表，以及 2) 某些电子邮件客户端可能被设置为阻止从出于安全原因在电子邮件中，即使用户在线。如果您的样式都包含在电子邮件的主体中，那将不是问题。（您可能仍然对图形有同样的问题，但这是一个完全不同的讨论主题）

【讨论】：

That said, I would expect virtually all email clients to correctly interpret the CSS padding style. 不。 Outlook 2007、2010 和 2013 不支持在 p 元素或 div 元素上进行填充。 Source.

【解决方案2】：

我从来没有遇到过这样的“速记”问题，只要提供了所有的值。从技术上讲，padding:0px 4px; 应该可以使 top & bottom 为 0，left & right 为 4，但并不是所有的电子邮件客户端都会尊重这一点（我在和你说话，Outlook 2007/2010！）所以你需要包括所有四个用于边距、填充、边框等。

【讨论】：

【解决方案3】：

如果这仍然令人感兴趣，我最近一直在研究这个。一些群发邮件公司明确表示，某些应用程序（至少）在某些电子邮件客户端上呈现不佳。

http://www.campaignmonitor.com/resources/will-it-work/guidelines/

实际上，在查看了一些模板的电子邮件来源（Mailchimp、Campaign Monitor 等）之后，他们都一直在避免使用它们，所以到目前为止我的结论是也这样做。

无论如何，比简写更重要的是，大多数 CSS 样式需要“内联”元素，因为如果在头部定义，许多（包括 Gmail）会忽略它们。

作为一个简单的解决方案，我倾向于在 body 元素和围绕内容的包含表上使用基本样式（因为某些客户端也会删除 body 样式）。

【讨论】：

Gmail 现在似乎也可以处理 head 标签中定义的 CSS 样式，但其他网络邮件提供商仍然不这样做。

【解决方案4】：

在最简单的形式中，您可以像这样为每个元素设置样式：

<p style="padding:0 4px 0 6px;">your contents</p>

【讨论】：

【解决方案5】：

是的。

而且，与任何“网页”一样，用户实际看到的内容完全取决于“浏览器”（或支持 HTML 的电子邮件客户端）。

你可以简单地尝试一下。

_{另外，我推荐not being obnoxious，通过在电子邮件中散布图形和颜色。 :(}

【讨论】：

仅供参考。您发布的链接至少有 5 年的历史。（看着底部写着[Updated - 19 March 2006]
@ITroubs：然后呢？所以？因此？