4

我有以下 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上，除了上标之外的所有文本都被提升到顶部：

铬 23 窗口

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

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

您有解决方法的想法吗？如果可能，仅更改 CSS。

更新

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

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

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

4

3 回答 3

5

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

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

如果您需要各种上标并且不能将所有上标都表示为上标字符，那么最好使用span可以减小字体大小并提高字符的元素和样式——使用相对定位而不是vertical-align（这往往会导致行间距不均匀，有时可能干扰其他地方设置的垂直对齐方式）。例子：

span.sup {
    font-size: 80%;
    position: relative;
    bottom: 1ex;
}
于 2012-12-06T12:17:54.837 回答
1

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

sup {font-size: 80%; position: relative;bottom: .8ex;}
于 2013-05-28T12:53:26.947 回答
0

在我看来，&sup2;由于语义意义，使用实体比使用 css 样式更好。

于 2014-02-25T14:59:17.997 回答