解决文字和text-decoration:underline下划线重叠问题 « 张鑫旭-鑫空间-鑫生活

by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5793
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、text-decoration:underline下划线的问题

CSS text-decoration:underline可以给内联文本增加下划线，但是，如果对细节要求较高，就会发现，下划线经常会和中文文字的下边缘搞在一起，英文的话甚至直接穿越，看起来就比较香菇蓝瘦。

上图几个中文下边缘正好都是横线，结果，可以看到，基本上合在一起分不清谁是谁了，换成微软雅黑字体（见下图），似乎变本加厉了：

有没有什么办法让下划线不要靠得这么近，或者文字可以完整清晰地显示呢？

有，方法还不少，下面逐一介绍，大家可以根据自己的实际项目需求，选择合适的技术选型。

方法一：text-decoration-skip指定覆盖关系

理论上，使用下面的CSS：

a { text-decoration-skip: ink; }

机会有类似下图的效果：
skip:ink的效果截图示意

text-decoration-skip是text-decoration相关的CSS3新的属性，还有很多其他新的CSS3 text-decoration属性，可以指定下划线类型等，具体可参见我之前的文章：“了解CSS3 text-decoration新特性新表现”。

看上去效果很不错，但是遗憾的是，即使现在快到2017年了，此属性的浏览器支持情况还是很不乐观，包括大头Chrome浏览器目前尚未支持。

Safari 8+ supports -webkit-text-decoration-skip with values none and skip (other values behave like none or skip)

目前也就是Safari 8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性，且仅仅支持skip（默认值）和none两个值，换句话说，Safari 8+浏览器默认下划线就是和文字非穿越而是避让效果。这进一步导致CSS代码中没有text-decoration-skip属性出现的必要了。所以，此方法虽然最原生，但时机还不够。

方法二：使用border-bottom属性模拟

内联元素虽然不支持垂直方向的margin属性，但是支持垂直方向的padding属性和border属性，并且，对原来的布局定位等没有任何影响。因此，配合padding，我们就可以很有效地调节下边框和文字下边缘的距离，实现我们最想要的的效果，类似下面的CSS代码：

a {
    text-decoration: none;
    border-bottom: 1px solid;
}

效果类似下图：

如果觉得border-bottom模拟的下划线还是和文字走得太近，我们可以使用padding-bottom再撑开点距离，例如：

a {
    text-decoration: none;
    border-bottom: 1px solid;
    padding-bottom: 5px;
}

则效果类似下面截图：
padding border配合的下划线效果截图

眼见为实，您可以狠狠地点击这里：border-bottom模拟下划线文字无重叠demo

注意，使用border-bottom模拟下划线的时候，border-color最好缺省，这样就会使用文字的color颜色作为边框色，这样，鼠标hover的时候，下划线会自动和文字一起变色，类似下图效果：
border模拟下划线hover颜色跟着变化效果

使用border-bottom模拟的另外一个好处就是我们还可以使用虚线下划线：

a {
    text-decoration: none;
    border-bottom: 1px dashed;
}

类似下面实际项目需求的截图就可以使用这种策略：
军事征文下划线

方法三：使用box-shadow属性模拟

我们也可以使用CSS3 box-shadow属性模拟下划线，代码如下：

a {
    text-decoration: none;
    box-shadow: 0 1px;
}

同样，建议颜色值缺省，使用color属性的颜色值。

效果基本上和border-bottom如出一辙，如下截图：
box-shadow模拟下划线

眼见为实，您可以狠狠地点击这里：box-shadow模拟下划线效果demo

相比border-bottom属性，box-shadow的优势在于，即使我们把内联元素设置成display:inline-block，生成的下划线也不会对垂直对齐或者布局产生影响，但，如果是border-bottom，会增加元素的尺寸，可能就会影响元素的排列。

但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能实线，不能虚线。

方法四：使用background-image属性模拟

就是使用CSS3渐变绘制实线或虚线背景图。

效果截图如下：
使用background-image实现的下划线效果

方法五：使用SVG滤镜处理

该SVG滤镜相关HTML代码如下：

<svg class="out">
  <filter id="svg-underline" primitiveUnits="objectBoundingBox">
    <!-- 原图文基础上水平垂直方向一点点扩展并存储到新的层上 -->
    <feMorphology in="SourceGraphic" operator="dilate" radius="0.0075 0.05" result="outline"></feMorphology>
    <!-- 一个蓝色矩形，高度3%然后宽度100%，位置稍微往下一点 -->
    <feFlood flood-color="#34538b" width="1" height="0.03" x="0" y="0.9" result="underline"></feFlood>
    <!-- 遮罩蓝色矩形，这样，文字重合部分边缘会镂空 -->
    <feComposite in="underline" in2="outline" operator="out" result="underline"></feComposite>
    <!-- 效果合体 -->
    <feMerge>
      <feMergeNode in="underline"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
</svg>