Why does GMail ignore my inline <sup> styling in HTML email

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

Many mail clients remove any tags or styling that could allow the message to escape its container and start messing with the mail interface itself.

Answer 2

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.