代码片段 → CSS → 防止上标和下标影响行高 防止上标和下标影响行高 Chris Coyier on 2016 年 4 月 7 日 sup, sub { vertical-align: baseline; position: relative; top: -0.4em; } sub { top: 0.4em; }
完美！
刚刚节省了我很多工作
耶！
非常感谢！我尝试过我找到的几个其他选项，但没有一个有效。感谢你的天才和慷慨。深鞠躬。
谢谢！
我一直绞尽脑汁想做到这一点。感谢分享并拯救了我剩下的头发。
非常感谢！；)
太感谢了！!!!!!!!!!!!!!!
嗨，
我知道这个 css hack 因为它已经存在于我正在使用的 Drupal 的启动主题（omega）中，但是当上标有下划线时，它不能很好地工作（或者可能取决于使用的字体，我的字体是来自 google fonts 的“Nunito”）。
我从 stackoverflow 上的一篇文章中找到了一个解决方案 (http://stackoverflow.com/questions/16835280/superscript-underline-moves-up-with-text/20671391#20671391)，但是它没有考虑文本颜色来构建线条，也没有像常规的 text-decoration:underline 那样放置。
由于我需要为我的一个客户找到一个解决方案，我做了一个小的 jQuery 修复，你也可以尝试一下：https://github.com/webastien/superscript-fixer
如果它可以节省时间并避免头痛…
谢谢！这正是我需要的。我已经把它添加到我新的不断增长的 CSS 技巧包中，我在注释中记下了这个页面，这样我就可以永远记住我从哪里得到它了 - 其他人看到后也会记住。
再次感谢！
非常有帮助，下面还有关于更复杂问题的额外评论。太棒了！谢谢！
感谢提示，非常有用。我补充一点，如果你将字体大小增加太多，行高会再次移动，所以我找到的解决方案只是添加
谢谢你，Valentin！
我一直使用这个 hack 很长时间了，但是今天我注意到下标再次（或者仍然？）稍微影响了行间距，在 Chrome 和 IE 11 中都是这样（但在 Firefox 中则不然）。添加你的“line-height:0”修复解决了这个问题
p {font:normal normal 11pt Verdana,Arial,sans-serif; line-height:1.3em;}
sub {vertical-align:baseline; position:relative; top:0.3em; line-height:0;}
当然，当我们这样做时，我们假设每行都会有其他（非下标）文本，以建立正确的行间距。但是我不太喜欢这种假设，所以我就尝试了其他行间距值，我非常惊讶地发现“100%”的效果和“0”一样好
p {font:normal normal 11pt Verdana,Arial,sans-serif; line-height:1.3em;}
sub {vertical-align:baseline; position:relative; top:0.3em; line-height:100%;}
事实上，任何高达 147%（在 Chrome 版本 47.0.2526.106 m 中）或 163%（在 IE 版本 11.0.9600.18124 / 11.0.26 中）似乎都可以。我不明白为什么，但确实可以。
我想要一种方法来写出带有 pi/4 或 pi/3 的三角函数。通过修改 sub 和 sup 如下，这就可以实现
sub { top: 0.2em; }
sup { right: -0.4em;}
Chris，“查看此处”链接已经失效。幸运的是，WayBack Machine 有一个副本，在这里
http://web.archive.org/web/20130813092354/http://paularmstrongdesigns.com/weblog/stop-superscripts-from-breaking-line-heights-once-and-for-all/
嗨 Chris！…
我可以用什么 CSS 技巧来实现文本格式化办公套件（例如 LibreOffice）中屏幕正常点大小的 100% 连续垂直等宽对齐，在向正常点大小添加上标、下标或框元素后？
目前… 例如在 LibreOffice 中… 当将上述 SS/SS 或框元素添加到“电子页面”上的正常点大小后，SS/SS 或框元素会根据正常点大小创建自己的表格对齐；并且，因此，消除正常点大小的连续垂直等宽对齐！因此！… 从而！… 结束了我的持续使用，L/O！
但是，这个问题也扩展到我使用过的所有其他办公套件！
虽然据说 Nick Gravgaard 的 Elastic Tabstops 可能是一种解决方案，但我不确定如何将其整合到 L/O 中！… 并且！… 如果包含进来，是否真的会有效！
我… 为了我的目的！… 需要 100% CVMA，以补充旧式机械打字机的完整“外观和感觉”！… 这是实现真正旧式机械打字机美学的最后一个堡垒！并且很高兴最终能添加这个，到当前的旧式机械打字机美学软件列表中… 例如，一些程序员创建的计算机屏幕上的“键击出血” - 并且，根据一个人在按 PC 键盘时的实际压力进行加权！; 能够向后，然后覆盖已经输入的文本！- 以及各种字形！; 以及，提供打字机按键“点击声”的软件！希望很快，所有这些美学功能都将成为标准配置（尽管，它们应该有自己的“小工具缓存”和小部件，位于现在操作系统中字体缓存中）！
现在… 我知道！… 旧式机械打字机中的 SS/SS 和框元素不会影响其正常点大小的 CVMA，这是由于这些打字机的“固定机制”！… 因为正常点大小和 SS/SS 字形都是相等的！但是！… 争论这一点错过了要点！并且是，打字机为正常点大小提供 100% CVMA，即使添加了 SS/SS 和框元素（后者的元素… 例如… 使用“单引号”和“下划线”符号时）！并且，至少对我来说！… 是，CVMA 的“本质定义”… 并且，旧式打字的“本质特征”！简而言之… 为 PC 屏幕上的 100% CVMA 编程，是经典打字机中 CVMA 的逻辑扩展（经典打字机中 SS/SS 和框字形的固定大小与 PC 屏幕上显示的字形之间的差异… 无论是什么描述！… 都不管！）！
PC 屏幕上的 100% CVMA - 对我来说 - 等同于
旧式机械打字！… 否则，它是假的旧式机械打字！为什么这个问题在从旧式打字机迁移到办公套件的最开始没有被彻底解决，令人困惑！… 并且令人沮丧！！
请！… 不要发邮件！
非常感谢你的解决方案代码！
太棒了！感谢你的解决方案。
太棒了！非常感谢！:)
我喜欢使用它。每次我必须在我的 HTML 中写出来时，我都会大声说出来，就像在和我的好朋友说话一样，“‘SUP，伙计！”
谢谢！非常有用！
谢谢您！！！（我喜欢简洁明了的解决方案）
这更简单，为什么不使用这个呢？
sup, sub {font-size: 0.7em; /* 覆盖较小的大小（.833333em） */
line-height: 1;
}