使用 <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 中设置更大的行高，但这只会使效果更明显。垂直对齐似乎也没有做任何事情。所以我现在有点没有想法了。

有人知道如何将一行中的所有文本(无论行高、下标、上标等)打印在该行的底部吗？

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

Answer 1

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

对此我们无能为力；但是通过边距和填充以及所有其他形式的东西，您可能能够消除这种效果。另一个(特别)肮脏的黑客是在每行上添加一些不可见的子/上标字符，交错各行以使效果变得不那么明显。

还有；

Would anyone know how to have all text in a line (regardless of line-height, subscript, superscript, etc) printed on the bottom of that line?

这一点没有意义:如果您希望它们位于行的底部，请不要将它们加上标!

替代方案:不要使用 sub/super；使用真实字符:10²⁴；这些可从 U+2070 向外购买；至 U+2094，以及 U+B2； U+B3，但根据字体，它们可能看起来相当奇怪。

替代扩展:如果您可以使用指数的计算机表示法(E+24 样式)；有诸如 ㎢、㎨ 之类的单字符内容(分别为体积和平均重力加速度)，这些复合 Material 从 U+3380 开始；但同样，它们可能看起来有点奇怪(或者根本不存在)。