电子邮件编码：Gmail 和 Gmail 应用似乎忽略了我的 CSS

Question

我的电子邮件在任何其他计算机或移动显示器上都能正常工作，但 Gmail 应用程序和笔记本电脑中的 Gmail 除外。 2个问题：

• 我在 css 中添加了一个 @media 代码，以便在移动设备上查看图像时能够响应（宽度：100%），但 gmail 应用程序（在三星手机和苹果手机中测试）似乎忽略它。所以我的图像看起来更小，为大屏幕指定了固定宽度。 结果如下：http://screencast.com/t/nm3jyc47K。预期的结果是让图像占满表格的 100%（如果我们排除了间隔，几乎是整个屏幕），并且明显居中。

• 在 Gmail 笔记本电脑网站上，我的表格之间的间隔似乎被忽略了，因此内联元素相互接触。结果如下：http://screencast.com/t/3D7H0Fqly。预期的结果是中间有一个 24 像素的间隔。 （PD：不要管大小，我在做一些测试，桌面上的大小显示正常）

这是图片的 HTML 代码，3 张图片和 2 个间隔。

<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
  <tbody>
    <tr>
      <td align="center">
        <a href="img-1.png" style="border:none; display:block;height:136px" width="170px" /></a>
      </td>
    </tr>
    <tr>
      <td height="20">&nbsp;</td>
    </tr>
  </tbody>
</table>

<!--[if mso]></td><td width="24"><![endif]-->

<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;">
  <tbody>
    <tr>
      <td height="1" style="font-size:1px;line-height:1px">&nbsp;</td>
    </tr>
  </tbody>
</table>
<!--[if mso]></td><td width="170" valign="top"><![endif]-->

<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
  <tbody>
    <tr>
      <td align="center">
        <a href="img-2.png" style="border:none; display:block;height:136px" width="170px" /></a>
      </td>
    </tr>
    <tr>
      <td height="20">&nbsp;</td>
    </tr>
  </tbody>
</table>

<!--[if mso]></td><td width="24"><![endif]-->

<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;">
  <tbody>
    <tr>
      <td height="1" style="font-size:1px;line-height:1px">&nbsp;</td>
    </tr>
  </tbody>
</table>

<!--[if mso]></td><td width="170" valign="top"><![endif]-->

<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
  <tbody>
    <tr>
      <td align="center">
        <a href="img-3.png" style="border:none; display:block;height:136px" width="170px" /></a>
      </td>
    </tr>
    <tr>
      <td height="20">&nbsp;</td>
    </tr>
  </tbody>
</table>

现在是 css 代码，位于电子邮件的头部：

<style type="text/css">
body{width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0;background-color:#ffffff}
* {-webkit-font-smoothing:antialiased}
.ExternalClass * {line-height:100%}
table td {border-collapse:collapse}
.wlf {width:600px}
.w-420 {width:420px}
.w-170 {width:170px}
.w-120 {width:120px}
.w-24 {width:24px}
.w-15 {width:15px}
@media only screen and (max-width:590px) {
    .full-width {width:100% !important}
    .m-width {width:100% !important;max-width:100% !important;float:none !important}
    .m-block {display:block}
    .m-none {display:none}
    .m-img-ft {width:100% !important;height:auto !important;max-width:250px !important}
    div {box-sizing:border-box !important}
}
</style>

再一次，我对所有其他电子邮件程序都没有任何问题。知道为了解决这两个问题可能有什么问题吗？ （不影响其他人的显示？）

谢谢

Answer 1

不幸的是，您发现了大多数 HTML 电子邮件开发人员的头发很少且左眼有轻微抽搐的原因。不幸的是，每个电子邮件客户端都没有针对电子邮件的 HTML 的“标准”，因此您不仅可以在接受哪些标签/样式方面获得很大的多样性，而且还可以了解每种标签/样式的具体作用。

对于您的问题，它似乎忽略它的原因是因为 它 完全剥离了您的样式标签。 (ref) Gmail 应用程序（在桌面和移动设备上）几乎把所有东西都从头脑中剥离出来，Gmail 网络客户端有very limited 'hacky' support on stylesheets。

查看主要电子邮件客户端接受的内容的好资源：CampaignMonitor/CSS

请记住，当您在 Gmail 上修复它时，它很可能会在其他电子邮件客户端上破坏它。我建议获得酸性测试服务，例如在 Acid 或 Litmus 上发送电子邮件等。

您可能需要先开始为 Gmail 应用程序设计，然后使用 CSS/“幽灵表”或 MSO 条件使其适用于桌面。

Fluid Responsive 模板的示例位置：

http://tedgoas.github.io/Cerberus/

https://www.emailonacid.com/blog/article/email-marketing/our-gift-to-you-a-free-fluid-hybrid-email-template

http://labs.actionrocket.co/the-hybrid-coding-approach-2

Answer 2

Gmail 不支持 <style> 标签，因此您必须内联所有 CSS。 所有其他电子邮件客户端都支持 <style> 标签，所以如果不是 Gmail，我们d 能够像网页一样编写 html 电子邮件。手动内联 CSS 是最安全的，尽管有一些 CSS 内联工具可以加快处理速度。

关于分隔符，类似这样的东西适用于电子邮件客户端：

<!-- Clear Spacer : BEGIN -->
    <tr>
        <td height="40" style="font-size: 0; line-height: 0;">
            &nbsp;
        </td>
    </tr>
<!-- Clear Spacer : END -->

注意：我编写了 Gortonington 的回答（你好！）中引用的第一个示例模板，并且可以保证该 repo 中的所有 CSS 和间隔符在 Gmail / Gmail 应用程序中工作。