为什么GMail会忽略^{HTML电子邮件中的}内联^样式

Question

I make HTML emails and I understand that different email clients and browsers have different rules that render code differently. One thing I have never been able to figure out though is why the following code is ignored:

<sup style="vertical-align:baseline; position:relative; bottom:5px;">1,2</sup>

This is what I've come up with through much trial and error as the best solution for not messing up line heights across different clients, especially pesky IE7. It works and looks fantastic in everything except GMail, in which it simply lies on the baseline and ignores the bottom:5px .

I've tried adding !important after each style, but still nothing.

I've tried making it a class as well, but again, the same result.

Any ideas why it's ignoring my code?

Answer 1

Gmail strips "interesting" CSS properties like position when displying emails in its web interface.
This is done to prevent the email from covering Gmail's UI.

Here is a list of supported properties.

Answer 2

许多邮件客户端删除任何可能允许邮件逃离其容器并开始搞乱邮件界面本身的标签或样式。