在Chrome和Safari中使用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更改.

UPDATE

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

我创建了一个小提琴来展示不同的实现.

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

Answer 1

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

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

如果你需要各种上标并且不能将它们全部表示为上标字符,最好使用span减少字体大小和提升字符的元素和样式 - 使用相对定位而不是vertical-align(这往往会导致不均匀的行间距,有时可能干扰其他地方的垂直对齐方式).例:

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