修复使用sub和sup时的行间距问题

最新推荐文章于 2021-06-05 08:36:14 发布

转载最新推荐文章于 2021-06-05 08:36:14 发布 · 257 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/Charons/p/11130071.html

收录于

当前文章被以下社区和专栏收录：

本文介绍如何使用CSS解决sub和sup元素导致的行高问题，通过normalize.css中的代码片段，实现跨浏览器一致的显示效果。

sub和sup元素会轻微地增大行高。

幸好，用一点CSS就可以修复这个问题。

来自Nicolas Gallagher和Jonathan Neal的normalize.css（http://necolas.github.com/normalize.css/）。

他们借用了https://gist.github.com/413930里的代码并去掉了注释。

上面这个GitHub的链接里包含了对这一段CSS的详细解释，感兴趣可以去看一看。

normalize.css推荐下载这个文件。该文件可以帮助建立一个跨浏览器的统一基准样式表，其文档也很详尽。

 1 /*
 2 * 在所有浏览器中防止sub和sup影响line-height
 3 * gist.github.com/413930
 4 */
 5 sub,sup {
 6             font-size: 75%;
 7             line-height: 0;
 8             position: relative;
 9             vertical-align: baseline;
10 }
11 sup {    top: -0.5em; }
12 sub {    bottom: -0.25em; }