Gmail（或其他东西）正在更改我的班级名称？答案

【问题标题】：Gmail (or something) is changing my class names?Gmail（或其他东西）正在更改我的班级名称？
【发布时间】：2017-11-25 23:06:37
【问题描述】：

好吧，这很奇怪。我有一个我正在尝试调整的 HTML 电子邮件模板。在模板中，我有一个标准的<ul>。但是，客户要求列表上方没有边距。所以，很容易。我刚刚添加了一个 `margin-top: -10px' 作为样式：

 <ul style="margin-top: -10px;">
     <li>....</li>
 </ul>

但是当我给自己发电子邮件时，这种风格已经被剥夺了。它是这样显示的：

 <ul>
     <li>....</li>
 </ul>

我想也许它被缓存了。所以我更改了顶部列表项的文本：

 <ul style="margin-top: -10px;">
     <li>This is a test</li>
 </ul>

然后我给自己发了电子邮件，我收到了这个：

 <ul>
     <li>This is a test</li>
 </ul>

所以，我做了一个类：

.UlNoTopMargin {margin-top: -10px;}

然后这样做了：

 <ul class="UlNoTopMargin">
     <li>This is a test</li>
 </ul>

我给自己发了电子邮件，我收到了这个：

<ul class="m_4942690989181909996UlNoTopMargin">
     <li>This is a test</li>
 </ul>

什么 $@#!@!!这是怎么回事？我正在使用 gmail 查看电子邮件。 Gmail 是这样做的吗？如果不是，那这到底是从哪里来的？

【问题讨论】：

可能是因为 Gmail 不允许负 CSS 边距值。

标签： html css email

【解决方案1】：

为了扩展@gwally 的答案，我相信Gmail 这样做的原因是为了避免您的电子邮件影响Gmail 本身的外部DOM 元素。如果你能做到这一点，你就可以有效地制作恶意电子邮件，通过一些巧妙的 CSS 诡计从用户那里窃取信息，或者“修复”Gmail 的外观以发起一些非常讨厌的网络钓鱼攻击。 CSS 属性的限制可能与 UI/UX 一样也是一项安全决策。

出于好奇，我只花了一个小时在给自己的电子邮件中模糊类名，试图绕过这个机制。这似乎不可能，尽管我不会声称任何解决方案都是防弹的。

【讨论】：

【解决方案2】：

Gmail 绝对会更改您电子邮件中的类名。如果您创建样式表并将其发送出去，它将更改样式表和电子邮件正文中的类名。它还会删除它不支持的任何样式，有时是整个工作表。

以下是 Gmail 支持的 CSS 属性和查询：

https://developers.google.com/gmail/design/reference/supported_css

祝你好运。

【讨论】：

非常有趣。谢谢！

【解决方案3】：

为了获得最佳支持，您可能应该使用<table> 而不是<ul>。此外，边距不像填充那样被广泛支持，所以我会尝试这样的事情：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="5">&middot;</td>
        <td align="left" style="padding-top: 10px;">This is a test</td>
    </tr>
</table>

【讨论】：

是的，好的。（叹气）我担心我可能不得不走这条路。严重烦人。但是，谢谢你证实了我的恐惧。
是的。很多时候，要让电子邮件看起来像你想要的那样，唯一的方法就是召唤一大堆桌子。