电子邮件简报不加载CSS

时间:2014-01-29 10:51:16

标签: html css email gmail newsletter

我创建了一个用作电子邮件简报的网页。我在代码中使用了基本的CSS和表格。当我从浏览器复制内容并将其粘贴到电子邮件撰写页面时,不会加载CSS。

我阅读了其他一些关于Gmail不支持<style>标记的文章,但我尝试了Yahoo!和Lotus Notes,它仍然有同样的问题。

如何让这项工作适用于Gmail和其他邮件提供商?

我已将代码放入dropbox文件夹中: https://dl.dropboxusercontent.com/u/29654441/email_newsletter/email_newsletter1.html

2 个答案:

答案 0 :(得分:4)

Gmail和其他基于Web浏览器的电子邮件客户端不支持文档头部(或<style>部分)中的<head>标记,因为它们与他们的页面的CSS。您还需要内联移动/复制CSS。

e.g:

<head>
  <style>
    a { color: #ff0000; }
  </style>
</head>
<body>
  <a href="#"></a>
</body>

...变为

<body>
  <a href="#" style="color:#ff0000;"></a>
</body>

一些在线工具可以为您提供帮助,但它们仅支持基本的CSS。您可能需要手动执行此操作,并且记住将来只能内联样式。

尝试http://premailer.dialect.ca/http://zurb.com/ink/inliner.php

答案 1 :(得分:1)

他们不支持HTML电子邮件撰写,他们会在收到时显示它们但你很难做到。您可以通过允许HTML撰写的IMAP客户端来执行此操作,也可以注册MailChimp等服务。