Question

好的，这很奇怪。我有一个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正在这样做吗？如果没有，那么它究竟来自哪里？

Answer 1

为获得最佳支持，您应该使用<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>

Answer 2

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

这些是Gmail支持的CSS属性和查询：

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

祝你好运。

Answer 3

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

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

Gmail（或其他内容）正在更改我的班级名称？

3 个答案: