使用^和保持一致的行间距

Question

添加<sup>或<sub>标记可以摒弃文本块的行间距，我该如何防止这种情况？

Answer 1

使用CSS覆盖默认浏览器样式：

sup, sub
{
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
}

sup { bottom: 1ex; }
sub { top: .5ex; }

请注意，在版本7之前，IE在其他浏览器中唯一地处理vertical-align。使用这种方法，我需要IE 6及以下版本的下划线黑客。

<强>之前：

<强>后：

Source

Answer 2

除了@ DannyBeckett的优秀答案之外，还有一种完全不同的方法，它可以在工作时产生更好的印刷质量 - 但是现在除了现代浏览器中的一些字体（主要是Microsoft C字体）之外不起作用。我希望它能在几年内成为一个现实的选择，即使在某些条件下它也可以使用。

您可以使用sup，而不是使用<span class=sup>，并通过设置

指定使用上标样式字形

.sup { font-feature-settings: "sups"; }

以及font-feature-settings的浏览器前缀版本。

Demo可用。可以预期它可以在现代Windows环境中工作，而不是其他地方。

这仅适用于实际包含此类字形的字体，使用OpenType功能可访问的方式，以及不断增加但仍有限的浏览器支持。但是当它工作时，它使用由创建字体的印刷工程师设计的字形，因此可以期望它们很好地适应字体（尽管这种期望并不总是满足）。

因此，除了消除行间距问题之外，这还有助于解决sup的实现仅在较高垂直位置使用缩小版本的普通字符的问题（因此笔划往往也是如此）瘦，并且为了避免使这个问题太大，实现倾向于使用适度的大小减小，因此结果太大了。）

通过@font-face使用可下载字体在这方面听起来不错。但是，在我测试的Google字体中，只有Source Sans Pro似乎包含字母的上标字形，并且a）由Google托管使用它不会出于某种原因访问它们，b）当使用FontSquirrel处理时，字形是但不知何故扭曲了（例如，“h”看起来高于“t”），即使它们在原始.ttf文件中似乎没问题。

（使用span而非sub的原因是，对于后者，您必须将字体大小设置为100％以避免默认大小减小。如果IE确实如此没有在这个上下文中解释百分比错误的令人讨厌的错误，因为它与IE中元素的默认字体大小有关，而与父元素字体大小无关。）