Gmail 正在修剪 html 电子邮件内容。如何避免这个问题？答案

【问题标题】：Gmail is trimming html email content. How to avoid the issue?Gmail 正在修剪 html 电子邮件内容。如何避免这个问题？
【发布时间】：2012-02-22 20:56:39
【问题描述】：

Gmail 在电子邮件中引入了修剪功能，以“提高可读性”。这给我带来了很多痛苦，因为我有一个电子邮件通知系统，我在其中向用户发送一些 html 电子邮件。电子邮件基本上是这样的：

divs and styling
Object alert in Project by User
tables and tr/td
User Action on Object in Project
/tables and tr/td
/divs and styling

link
footer

要将所有电子邮件分组到一个对话中，第一封电子邮件有主题，后续电子邮件有 Re: 主题。

活跃用户可以收到大量这样的电子邮件，但由于“更好的可读性”功能，所有电子邮件内容（从第二封电子邮件开始）都被禁止。

我正在寻求建议 - 也许我应该重新设计我的 html，或者 gmail 有一些反抑制代码，或者只是解决这个问题的技巧。

从用户角度描述的问题在这里：http://www.google.com/support/forum/p/gmail/thread?tid=756b83fa60ca1df7&hl=en

【问题讨论】：

我认为如果您能提供两封邮件的完整 HTML 以及所发生情况的屏幕截图，会更容易为您提供帮助。
嗨，如果我是你，我会尝试使用电子邮件，直到我弄清楚是什么让他们将电子邮件识别为前一封电子邮件的延续，然后尝试更改它。也许不同的电子邮件应该有不同的主题，或者主题不相关......我不会屏住呼吸让他们修复它

标签： gmail trim

【解决方案1】：

我在 HTML 时事通讯的表格上遇到了修剪问题。显示整个表格非常重要，因为它是 #1 我们的客户想要传达的内容。这是解决方法，或者至少这是我们解决问题的方法。 我们消除了任何重复。 所以对于这张表，每一行之间的线条，Gmail 看到的是行重复。所以我将像素宽度每隔 1 px 行，它消除了重复并解决了我们的问题。以便说，寻找重复，并尝试删除它。或者在某些情况下，您可能需要添加类型（白色）来创建变体。

Source.

PS：这有点不相关，但我在寻找一种禁用内容修剪并同时保持对话视图的方法时偶然发现了这个问题。我没有找到任何东西，所以我为Chrome 和Firefox 开发了一个小扩展。

【讨论】：

【解决方案2】：

事实证明，有一个非常简单的规则会导致这种行为：Gmail 会在看到邮件正文中的发件人 (From:) 名称后立即剪辑电子邮件，无论它出现在哪里。

解决方案：确保邮件正文中没有使用电子邮件中的 From: 名称（签名除外，签名可能会被剪掉！）。

【讨论】：

多么愚蠢的规则（尽管在我发现这可能是事实很久之后的问题）......当然，发件人的名字出现在他的电子邮件中并不少见，谷歌？

【解决方案3】：

这是 Gmail 中的一个可怕的错误，如果你不幸被它咬了的话。

在我的例子中，它是在一个干净的线程中“修剪”一个整个消息。 See an example here，注意到“修剪”的内容在屏幕截图中展开。

我最终解决了 Gmail 的错误，删除了您在该示例中看到的整个标题（“Awesome Home Swap”），包括它下面的边框。我没有真正尝试弄清楚具体是什么让 Gmail 将该标头混淆为“签名”（尽管我怀疑它可能是边框，使用 CSS 指令 border-bottom:1px dotted grey 来设置样式<td> 元素）。

【讨论】：

顺便说一句，this reference 可能有点价值。

【解决方案4】：

我刚刚找到了一个非常适合我的解决方案。只需在您的电子邮件中创建一堆隐藏的独特图像，即可为电子邮件中实际上并不独特的部分提供独特性。我正在使用 React 构建我的电子邮件，所以我有这个 Unique 组件，我几乎在任何地方都在使用它：

import * as React from "react"

function random() {
    return Math.round(Math.random() * 10000000).toString()
}

class Unique extends React.PureComponent {

    render() {
        return (
            <img style={Unique.style} src={`data:image/png;base64,${random()}`} />
        )
    }


    static style = {
        visibility: "hidden",
        display: "none",
        width: 0,
        height: 0,
        color: "transparent",
        background: "transparent",
    }
}

我喜欢这个解决方案的一点是，它不会弄乱电子邮件预览文本，否则如果您使用隐藏文本会发生这种情况。

【讨论】：

【解决方案5】：

在折叠部分之前添加双连字符-- 。我能够将它包装在与背景颜色匹配的字体中。为我工作...

【讨论】：

【解决方案6】：

我查看了 Gmail 发送的电子邮件。添加以下代码 (spacer.gif)。

我想这就是解决方案。

            <img alt="" height="1" width="3" src="https://notifications.google.com/g/img/AD-FnEztup4OClDshQhMVXDbi6Oi0lSN-FgEY1jyW384aotccA.gif">
        </td>
    </tr>
</table>
</body>
</html>

【讨论】：