Question

我的电子邮件可以在任何其他计算机或移动显示屏上正常使用，但笔记本电脑中的Gmail应用和Gmail除外。 2个问题：

我在css中添加了一个@media代码，以便在移动设备上查看时图片具有响应性（宽度：100％），但gmail应用程序（在三星手机和苹果手机中都经过测试）似乎无视它。所以我的图像看起来更小，为大屏幕指定了固定宽度。结果如下：http://screencast.com/t/nm3jyc47K。预期的结果是让图像填充表格的100％（如果我们排除间隔物，几乎所有的屏幕都是如此），并且明显居中。
在Gmail笔记本电脑网站上，表格之间的间隔符似乎被忽略，因此内联元素相互接触。结果如下：http://screencast.com/t/3D7H0Fqly。预期的结果是介于两者之间的24px间隔物。（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 on Acid或Litmus等。

您可能需要首先开始设计Gmail应用，然后使用CSS /“Ghost表”或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，我们可以像网页一样编写HTML电子邮件。手动内联CSS是最安全的，尽管有一些CSS内联工具可以加快速度。

关于垫片，这样的东西适用于电子邮件客户端：

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

注意：我编写了Gortonington答案中引用的第一个示例模板（问候！），并且可以保证该回购中的所有CSS和间隔符都可以在Gmail / Gmail应用中使用。

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

2 个答案: