在Chrome和Safari </sup>中使用valign = top表格中的<sup>呈现错误

Question

我有以下HTML：

<p style="font-family:Verdana">test<sup>2</sup></p>
<p style="font-family:Verdana;vertical-align:top">test<sup>2</sup></p>

问题在于，在第二个

中，<sup>不再位于文本上方，而是低几个像素。从本质上讲，vertical-align:top会将除上标之外的所有文本提升到顶部：

这不会发生在Firefox，Opera中，而是发生在Chrome和Safari（所有Windows）中，而不是某些字体（如Times New Roman）。

你认为这是字体的问题还是Webkit中的一个错误？ 已经报告了一个错误，我附上了我的测试用例，但我不知道它有多快会被解决，因为三年前报告了这个错误...

您对解决方法有什么想法吗？如果可能，只更改CSS。

更新

我尝试了建议的解决方案，其中大多数显示与使用sup标记相同。

我创建了一个 fiddle 来展示不同的实现。

Chrome错误报告：http://code.google.com/p/chromium/issues/detail?id=23634

Answer 1

避免使用sup元素，因为它会导致各种问题，并且永远不会产生印刷正确的上标。

如果您在文档中只需要上标2，则只需使用SUPERSCRIPT TWO字符，“²”或使用实体引用²。这意味着使用由印刷师设计的文本字符以适应字体设计。

如果您需要各种上标并且不能将它们全部表示为上标字符，最好使用span元素和样式来减少字体大小并提升字符 - 使用相对定位而不是{{1 （这往往会导致行间距不均匀，有时会干扰其他地方设置的垂直对齐）。例如：

vertical-align

Answer 2

我发现它更简单，特别是如果你已经添加了所有内容作为元素来为.css文件中的所有sup元素设置全局样式。像这样。

sup {font-size: 80%; position: relative;bottom: .8ex;}

Answer 3

在我看来，由于语义含义，最好使用²实体而不是css样式。