Question

Stack Overflow用户generally同意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">
    ...

在这里看到你会做出不同的事情吗？

Answer 1

Gmail不会剪辑大多数CSS，它与其他电子邮件客户端具有非常相似的支持。问题在于它剥离了头部和样式标签。因此，媒体查询（响应式电子邮件设计）无法在Gmail中运行，因为您无法内联媒体查询。

我没有调试过您的代码，但它对于响应式技术看起来很不错。注意到你有一个透明的背景设置，不能一致地工作，使用.png的所有透明度。如果需要背景图像，请使用this。另外，除非你试图漂浮一些东西，否则我不会在表格中使用div。

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

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

如何编写html简报以使用尽可能多的电子邮件客户端

1 个答案: