邮件中的CSS样式不起作用？

Question

我现在不知道发生了什么事情。我做了一个非常简单的页面，使用了非常简单的CSS。我使用表格，因为我知道你不能像普通的电子邮件那样使用div元素。所以在浏览器中查看它后，它看起来像这样：

http://i.stack.imgur.com/8FBtf.png

然后将其发送到邮件中（单元格数据已被替换）：

http://i.stack.imgur.com/tuXvA.png

所以CSS根本没有应用！

以下是HTML和CSS：

http://pastebin.com/PySeeW4m

有任何想法吗？

- qwerty

---

它是如何发送的？你在测试什么？ - dotty

是的，您可以在电子邮件中使用<div>元素。 - Spudley

不同的电子邮件客户端（甚至是像Hotmail这样的基于http的客户端）处理消息的方式不同。在其他客户端中可能正常工作。您的客户端可能会将CSS剥离为“不允许”。您已经在多少个客户端中进行了测试？ - David

对于电子邮件，我真的建议您使用内联样式。它很丑陋，难以阅读和维护，但支持更好。但是我认为使用div没有任何问题。 - Ortiga

我正在通过PHP发送它，并且我只在Gmail上进行了测试。我将尝试使用内联样式，谢谢！ - qwerty

Answer 1

大多数电子邮件客户端只会读取通过style=标签提供的内联CSS，Mailchimp提供了一个很棒的工具来自动执行此操作：

CSS内联工具

- Kokos

---

好的，搞定了，谢谢！这个工具也很棒，已经加入书签了。我想把你的答案标记为已接受，但是stackoverflow现在有点问题！ - qwerty

Answer 2

电子邮件中的CSS只支持部分功能，在各个客户端之间的支持程度也有很大差异。请查看http://www.campaignmonitor.com/css/。为了更好的兼容性，可能需要将所有CSS内联。

- joostdevries

Answer 3

请注意，例如 Gmail 会从 HTML 模板中剥离样式定义。您可以使用一种解决方法，直接在元素中包含样式信息，如下所示。

<div style="width:150px">...</div>

如果您想使用当前的CSS，请使用CSS解析器并通过正则表达式将其附加到元素上。

祝好

- Jeremy S.