html - 为什么 HTML 实体会忽略我在 Outlook 2003 和 IE7 中的跨度代码

Question

设置:

• HTML 电子邮件

嘉宾名单:

• Outlook 2000(桌面客户端)
• Outlook 2003(桌面客户端)
• Outlook 2007(桌面客户端)
• Outlook 2010(桌面客户端)
• Outlook(Firefox、Chrome、资源管理器)
• Gmail(Firefox、Chrome、资源管理器)
• 雅虎(Firefox、Chrome、资源管理器)
• Internet Explorer 7 浏览器 (FML)

我的代码:

<span style="font-size:85%;line-height:0;vertical-align:3px;">&reg;</span>

我不能使用任何类型的 <sup>标记，因为尽管我可以添加任何样式，但它无法始终如一地呈现。

问题:

为什么 Outlook 2003 和 IE7 仅在 HTML 实体的代码上方添加额外的行空间？

目前我所知道的:

我可以在我的 span 标签之间插入数字和文字，这在任何地方都很好。相同的大小，相同的位置，相同的行高。我尝试切换到十进制实体，但结果保持不变。例如，对于 ® 我使用 ®但也试过® .我什至说“让正确的编码实践见鬼去吧”，并在我的 HTML 代码中直接放了一个 ® 符号。没什么!

然后我想这可能与那些圆的实体有关(我的意思是我不知道，我正在尝试一切)所以我交换了 † ( † ) 和 ‡( ‡ ) 但它没有'改变任何东西。

视觉享受

上面的屏幕截图是在 Outlook 2003 中截取的。

(注:出于隐私原因，部分词语已更改)

Answer 1

您可以调整 <sup> 的字体大小和行高通过向 <sup> 添加样式内联元素标签。另一个有用的 CSS 属性是 baseline-shift

就我个人而言，我放弃了尝试从 <sup> 获得一致的结果。在 Outlook 和其他电子邮件客户端中，一些尊重一个 CSS 元素，而另一些则不尊重。

我得到的最一致的结果(整个行高没有受到影响)是通过创建一个小图像，避免同时使用上标字符。