网页中的上标和下标实现

网页开发中要显示带有上下标的文字,如下图:

方法一：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

HTML里的sup和sub分别是上标和下标，语义清晰。但是在某些浏览器中有问题而且页面显示效果也不是很好。

例如：

<div>产能部署10⁴t</div>
<div>H₂O</div>

效果如下图:

方法二:

直接用现有的上下标:

上标: 10⁴m³  10² 10³ ⁸ ⁵ ⁴ ⁶ ⁷ ⁹ ⁰ ¹

 下标: ᵣ ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉

如下图:

效果如下:

 

这样展示的效果要好很多,使用又很简单

 

 参考:https://www.cnblogs.com/fzj16888/p/5515661.html

 

 

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄