为什么 HTML 实体在 Outlook 2003 和 IE7 中忽略了我的跨度代码答案

【问题标题】：Why are HTML entities ignoring my span code in Outlook 2003 and IE7为什么 HTML 实体在 Outlook 2003 和 IE7 中忽略了我的跨度代码
【发布时间】：2013-08-08 17:58:07
【问题描述】：

设置：

HTML 电子邮件

来宾名单：

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

我的代码：

&reg;

我不能使用任何类型的  标记，因为尽管我可以添加任何样式，但它的呈现不一致。

问题：

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

到目前为止我所知道的：

我可以在我的跨度标签之间添加数字和单词，这一切都很好。相同的大小，相同的定位，相同的行高。我尝试切换到十进制实体，但结果保持不变。例如，对于 ®，我使用 &reg;，但也尝试了 &#174;。我什至说“以正确的编码实践见鬼去吧”，并在我的 HTML 代码中直接放了一个 ® 符号。没什么！

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

为了视觉享受

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

（注意：出于隐私原因，部分文字已更改）

【问题讨论】：

标签： html css internet-explorer-7 html-email outlook-2003

【解决方案1】：

您可以通过将样式内联添加到 标记来使用 元素的字体大小和行高。另一个可以提供帮助的 CSS 属性是 baseline-shift

我个人放弃了尝试在 Outlook 和其他电子邮件客户端中从  获得一致的结果，因为有些人尊重一个 CSS 元素，而另一些人则不这样做。

我得到的最一致的结果（不影响整个行高）是创建一个小图像，避免一起使用上标字符。

【讨论】：

 标签的问题在于它们在 Outlook 2007 和 2010 中呈现的效果不同。我尝试使用 @ 上的内联 CSS 样式调整字体大小和行高987654326@ 标签，但它在客户端之间不一致，即前面提到的那些。我刚刚也尝试了baseline-shift，虽然baseline-shift:sub 的影响很小，但行高仍然有点臃肿和明显。
@TimothyAdams 尝试使用带有 +/- 像素值的基线偏移。但如前所述，您仍然不会在所有电子邮件客户端中获得一致的结果，这就是为什么小图像可能是要走的路。

【解决方案2】：

以下代码在您的客户列表中始终为我正确呈现。也许尝试在字体大小中使用 px 而不是百分比。

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

【讨论】：

这是我最初拥有的，这使我得到了我当前的代码。问题在于 Outlook 2007 和 2010 中的字体大小实际上不是 100%（在本例中为 10px），它大约是应有大小的 70%。除非您上标的文字已经很小，否则这不是真正的问题，那么它就会变得难以辨认。

【解决方案3】：

如果你使用 span 标签而不是 sup 标签（并给它上面的所有参数，包括 font-size 和 vertical-align，这是 sup 通常在 OUTLOOK 混乱的小世界之外唯一会做的事情），这应该会使其他电子邮件客户端的结果与 OUTLOOK 看起来更相似。

【讨论】：