CSS实现千分符顶部垂直对齐且不增加行高的方案求助

针对你遇到的特殊千分符ᱸ的样式问题，以下两种CSS方案可以满足需求：

方案一：利用行高消除额外间距 #

gaf {
  font-size: 10px;
  vertical-align: top;
  line-height: 0;
  display: inline-block;
}

• vertical-align: top：将小尺寸的千分符直接对齐到当前行的顶部，避免super值导致的行高膨胀。
• line-height: 0：彻底消除小字体元素自身行高带来的额外垂直空间。
• display: inline-block：确保line-height属性能正确作用于该元素，避免布局异常。

方案二：相对定位手动偏移（兼容旧环境） #

如果遇到浏览器兼容问题，可使用相对定位调整位置，不影响整体布局流：

gaf {
  font-size: 10px;
  position: relative;
  top: -3px; /* 根据主字体大小微调此值 */
}

通过设置负的top值将千分符上移到行顶部，相对定位不会改变元素的占位空间，因此不会增加上下行的间距。

内容的提问来源于stack exchange，提问作者bobby324