HTML邮件在Google Inbox格式错乱问题求助（附代码示例）

嘿，我之前帮好几个开发者搞定过类似的Google Inbox邮件格式bug——你的情况肯定是Google自动识别到邮件里的地址，偷偷插入了Google Maps相关的链接和DOM元素，把你原本的表格布局（比如那个45%宽度的<td>）给挤变形了。下面是几个经过验证的解决方案，你可以挨个试试：

方案1：用HTML注释拆分地址，打断自动识别 #

Google的地址识别引擎会抓取连续的地址文本，我们可以在地址的各个部分之间插入空的HTML注释，让它无法识别为完整地址：

<td style="width: 45%;">
  <span style="color: #000; font-size: 14px;">
    @ADDRESS1<!-- -->, <!-- -->@CITY<!-- -->, <!-- -->@POSTAL_CODE
  </span>
</td>

这个方法的好处是完全不影响视觉效果，用户看到的还是正常的地址格式，但Google的识别器会被打断。

方案2：插入零宽空格拆分地址 #

零宽空格（​）是一种看不见的字符，能在不影响用户阅读的前提下，破坏地址的连续性：

<td style="width: 45%;">
  <span style="color: #000; font-size: 14px;">
    @ADDRESS1&#8203;,&#8203; @CITY&#8203;,&#8203; @POSTAL_CODE
  </span>
</td>

如果注释方法无效，这个零宽空格的成功率通常很高，因为大部分自动识别工具会把它当作字符分隔符。

方案3：添加禁用自动格式化的Meta标签 #

在邮件的<head>区域加入专门针对Google和苹果的禁用自动格式化标签，虽然不是100%覆盖所有情况，但对Inbox有一定效果：

<head>
  <!-- 禁用苹果邮件的自动重排 -->
  <meta name="x-apple-disable-message-reformatting">
  <!-- 禁用Google的自动翻译和部分自动链接 -->
  <meta name="google" content="notranslate">
  <!-- 强制IE渲染模式（辅助作用） -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

额外小贴士 #

• 尽量避免让地址文本单独占据一个完整的文本节点，把地址拆分成多个<span>包裹的小部分，也能降低被识别的概率；
• 测试的时候一定要用真实的Google Inbox账号查看，很多邮件预览工具模拟不出Google的自动注入行为；
• 如果以上方法都无效，可以尝试把地址放在一个固定宽度的<div>里，再嵌套到<td>中，给内层元素加上overflow: hidden的样式，防止注入的代码撑开布局。

内容的提问来源于stack exchange，提问作者adviner