1

Stack Overflow 用户普遍认为 HTML 时事通讯应该由 HTML 表格和内联样式组成，以确保尽可能多的电子邮件客户端可以处理代码。然而，一些标签，包括图像和锚点以及文本装饰和边框等属性，根据不同的电子邮件客户端呈现不一致。

在 HTML 时事通讯中应该使用和避免哪些标签、属性和属性，以确保所有电子邮件客户端都能正确阅读代码？MailChimp 用 css、id 和类来装饰它的模板。但是，例如，Gmail 会剪辑大多数 CSS。这是我当前代码的飞溅：

<!doctype html><html lang="en" dir="ltr">
<head>
  <meta http-equiv="content-type" charset="utf-8">
  <title>Twinkies maker threatens to liquidate</title>
  <meta content="Hostess Brands says if its striking bakers don't return to work today, it will liquidate the entire company." name="description">
  <link rel="image_src" href="http://www.mysite.com/i/logo.jpg">
  <style type="text/css">
  @media only screen and (max-width:480px){
    *[class~=stackonmobile]{width:100%!important;margin:0;display:block!important;clear:both!important}
    *[class~=hideonmobile]{display:none!important}
  }
  </style>
</head>
<body style="font-family:arial,sans-serif;color:#222;text-align:left;background-color:#fff;background:url(http://www.mysite.com/i/background.jpg) repeat-x;margin:0;padding:0"><center>

  <table cellspacing="0" cellpadding="0" border="0" style="border-spacing:0;max-width:640px;text-align:left;margin:auto">
    <tr>
      <!-- following td is included for message preview only -->
      <td style="height:0;font-size:0;color:#ffffff;text-indent:-9999px">Hostess Brands says if its striking bakers don't return to work today, it will liquidate the entire company.</td>
      <!-- // -->
    </tr>
    <tr><td align="left" style="float:left;text-align:left;vertical-align:middle"><a href="http://www.mysite.com/" style="color:#b12124;text-decoration:none"><img src="http://mysite.com/i/header-logo-on-top-of-background-image.png" width="100" height="41" border="0"></a></td><td align="right" style="height:16px;float:right;text-align:right;font-size:16px;line-height:16px;font-family:georgia,serif;color:#ffffff;font-style:italic;padding-top:10px">January 27, 2013</td></tr>

    <tr><td colspan="2" style="width:620px;padding-left:10px;padding-right:10px"><div style="height:5px;clear:both;margin-top:0;margin-bottom:14px;background:transparent url(http://www.mysite.com/i/1px-by-1px-white-spacer.jpg) repeat"></div></td></tr>

    <tr><td colspan="2" style="padding-left:20px;padding-right:20px">
    ...

看到这里有什么你会做不同的事情吗？

4

1 回答 1

2

Gmail 不会剪辑大多数 CSS，它与其他电子邮件客户端具有非常相似的支持。问题是它去掉了 head 和 style 标签。因此，媒体查询（响应式电子邮件设计）在 Gmail 中不起作用，因为您无法内联媒体查询。

我还没有调试过你的代码，但它看起来很适合响应式技术。注意到你有一个透明的背景设置，它不会始终如一地工作，使用 .png 的所有透明度。如果您想要背景图像，请使用此. 此外，除非您尝试浮动某些东西，否则我不会在表格内使用 div。

可以在 Gmail 中使用的另一种方法是具有max-width的流体模板。对于桌面，它看起来像 600 像素（或您设置的任何值），并且在所有主要电子邮件客户端中它将是 100% 的屏幕宽度。

电子邮件客户端中 CSS 支持的最佳参考：http: //www.campaignmonitor.com/css/

于 2013-01-28T14:07:10.560 回答