在一项业务中遇到文本下划线在g j p q y字母处断裂的难题。原因是这些字母占用descent区域，导致下划线被覆盖。解决方案包括调整`text-underline-position`属性和使用`border-bottom`替代。
前言
最近公司的一项业务中涉及到了文本下划线的问题，本来对于我们来说，下划线并不是难点，可曾想过，这里也能踩坑。
下划线？ so easy!
text-decoration: underline solid black;
加上这个，想都不用想
结果呢？
细心的小同学应该发现问题了，这条下划线，中间出现了断裂，是的，你没看错
g j p q y 这几个字母显示不了下划线！
这是什么鬼，之前不是这样的啊？
分析原因
回忆起之前碰到过的文字基线的问题，我这里找到解决思路：
对baseline不太了解的同学可以看看这两篇文章
CSS中vertical-align的默认值baseline的理解
最低0.47元/天 解锁文章
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
