logo标签列表

哪些HTML/CSS属性是安全的邮件属性？

htmlcssemailoutlookgmail
24

最近我为我的一个客户开发了一封电子报。但是我无法找到关于在主要的邮件客户端中可以安全使用哪些CSS和HTML的好资料。

我想也许这里有人拥有这方面的知识，我们可以创建一些在主要邮件客户端中能够正常工作的东西的列表。

以下是我从Campaign Monitor借来的流行邮件客户端列表。（如果我忘记了什么，请告诉我）

Microsoft Outlook
Apple Mail
Hotmail
Yahoo! Mail
Gmail

问题是这些主要浏览器中有哪些标签、属性、特殊习惯，以及如何轻松地避免它们。

谢谢帮助，

6个回答
10
7
您可以在电子邮件标准项目上找到所有主要电子邮件客户端支持和不支持的CSS功能的全面列表。
对于开发HTML电子邮件非常有用的基础框架是HTML Email Boilerplate，其中包含大量差异消除器。
而且，作为一般规则 - 总是使用表格和所有老派的HTML标签（align、center、valign、color等）。 阅读有关此主题的一些文章。
3
3
第一个链接现在已经非常过时了 ;) https://www.campaignmonitor.com/css/ <-- 这个链接稍微好一些。 - Refilon
2
0

Gmail已经支持中的style标签

您可以使用CSS选择器的子集来应用样式。Gmail支持类选择器、元素选择器和ID选择器。

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>This text is blue.</p=>
      <p>Jerry</p>
    </div>
  </body>
</html>

关于媒体查询：

您可以使用标准的CSS媒体查询来调整电子邮件的样式，以适应用户当前的设备。Gmail支持针对屏幕宽度、方向和分辨率的查询。

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接