html - 文本对齐时删除文本和 reference 之间的空格

Question

在 HTML 文档中，我使用 来插入引用。问题是，当文本合理时，它们看起来很难看，因为引用本身被视为一个词，不会粘附在文本上。

它应该是这样的:

这是它实际的样子:

这是我使用的代码:

rials<sup class="reference"><a name="origin_ref_1" href="#target_ref_1">†</a></sup> and hardly

引用是页面底部的引用文本和文本中插入的引用符号(为方便起见)之间的来回链接。

我怎样才能让引用贴在文本上，没有多余的空格？

我试过:

position:relative;
left:-xxxx em;

它成功地将引用移动到正确的位置，但没有改变单词之间的空间量，从而增加了引用后面的空白。此外，数量 XXX 与文本对齐有关。每行都不一样....

编辑:

这个问题似乎只影响 MAC 平台上的 Safari。但我还没有完全测试它。

Answer 1

解决方案是 Vitorino Fernandes 在已删除的评论中建议的解决方案。我希望他没有成为任意删除他的帖子的受害者，就像我最近在堆栈交换团队中一样(先开枪，然后再提问)。

既然他好像不在了，我特此转载一下他的回答:

为了解决这个问题，我必须设置 <sup>标记为 inline-block .它是如此简单。然后一切都正确显示。我已经实现了解决方案。

完整的 CSS 代码包括:

display: inline-block;
vertical-align: super; 
font-size: 60%;