text-decoration:underline与字体重叠

前几天工作遇到了字体与underline下划线重叠的问题，折腾了半天。今天在张鑫旭的博客上找到了几种解决方法分享一下

1 text-decoration-skip：不推荐使用 17年了这个属性支持率依然感人

2 border-bottom：内联元素虽然不支持垂直方向的margin属性但是支持垂直方向的padding和border

<style>
  .demo{
    border-bottom:1px solid ;
    padding-bottom:2px;//可以用padding-bottom控制线条与字体的距离
   }
</style>

<p>这是一个<span class="demo">demo</span><p>

3 border-bottom虽然很有效但是毕竟改变了字体的尺寸，有时候会打布局产生影响下面我们介绍 box-shadow 

好处是不占据额外空间，但是需要考虑IE9以下的兼容性。

<style>
  .demo{
   box-shadow: 0 1px
  }  

</style>
<p>这是一个<span class="demo"></span></p>

　　其他方法还有SVG滤镜和用image。看的太麻烦没有试验过！想学的请看张鑫旭的博客

http://www.zhangxinxu.com/wordpress/2016/11/css-text-decoration-underline-skip-override/

转载于:https://www.cnblogs.com/Tjinhui/p/6602614.html