使用 <sup> 和 <sub> 时的 HTML 样式问题

Question

我注意到在尝试以下列方式使用上标或下标时...

<ul>
<li><b>Mean Radius</b>      6,371.0 km</li>
<li><b>Mean Circumference</b>   40,041.47 km</li>
<li><b>Surface Area</b>     510,072,000 km<sup>2</sup></li>
<li><b>Volume</b>       1.0832073 &times; 10<sup>12</sup> km<sup>3</sup></li>
<li><b>Mass</b>         5.9736 &times; 10<sup>24</sup> kg</li>
<li><b>Mean Density</b>     5.5153 g/cm<sup>3</sup></li>
<li><b>Axial Tilt</b>       23.439281&deg;</li>
</ul>

最终发生的事情是整行的高度针对上标或下标文本进行了调整，并且左侧粗体文本在该行中垂直居中。这使得加粗的文本看起来有点奇怪，因为它看起来像是在行的底部稍上方浮动并且与其他文本不对齐。我尝试在 CSS 中制作更大的行高，但这只会使效果更明显。 Vertical-align 似乎也没有做任何事情。所以我现在有点想不通了。

有人知道如何将一行中的所有文本（不管行高、下标、上标等）打印在该行的底部吗？

PS - 我已经在 Chrome 6 和 Firefox 3.6.9 上查看过这个问题，并且两者都发生了，所以我假设这是一个普遍问题，而不是浏览器问题。我还注意到，无论行高如何，文本似乎总是在一行中垂直居中，所以问题显然变成了，因为带有上标的一行文本比不带上标的一行占据更多的“高度”，所以它的居中不会与另一条线对齐。

Answer 1

是的，这是一个普遍的问题；与排版的一般工作方式有关。

没有什么可做的；但是使用边距和填充以及各种其他笨拙的东西，您可能会破坏这种效果。另一个（特别）肮脏的 hack 是在每一行添加一些不可见的字符下标/上标，错开行以使效果变得不那么明显。

还有；

有人知道如何将一行中的所有文本（不管行高、下标、上标等）打印在该行的底部吗？

那一点没有意义：如果你想让它们在行的底部，不要上标！

替代方案：不要使用 sub/super；使用真实字符：10²⁴；这些可从 U+2070 向外使用；到 U+2094，以及 U+B2； U+B3，但根据字体的不同，它们可能看起来很不稳定。

Alternative Expanded：如果您可以摆脱指数的计算机符号（E+24 风格）； ㎢、㎨等（分别为体积和平均重力加速度）有单字符的东西，这些合成物从 U+3380 开始；但同样，它们可能看起来有点古怪（或根本不存在）。