当文本对齐时，删除text和^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

a{text-decoration:none;}
sup{padding:0px;margin-right:-5px;}

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

Answer 2

在我的实验中，只有在上标标记中的文本与它应该保持联系的父文本之间的html中有任何空格时，这才是问题。

好：<p>Hello<sup>footnote</sup> Lorem......</p>

不好：<p>Hello <sup>footnote</sup> Lorem......</p>

不好：<p>Hello<sup> footnote</sup> Lorem......</p>

如果没有空格，空格，不间断空格或换行符，则在计算对齐间距时，浏览器会将父文本和sup文本视为单个单词。

Answer 3

解决方案是Vitorino Fernandes在评论中提出的解决方案。我希望他没有成为任意移除他职位的受害者，就像我最近来自筹码交换团队（他先拍摄并稍后提问）。

由于他似乎不再存在，我在此重现他的回答：

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

完整的CSS代码包括：

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