最近在網上看了張鑫旭老師的一個帖子（解決文字和text-decoration:underline下劃線重疊問題），收獲不小。原文鏈接（http://www.zhangxinxu.com/wordpress/2016/11/css-text-decoration-underline-skip-override/）

下面我簡單的分享一下張鑫旭老師的幾種方法。

我們所要解決的問題是：當設置文字text-decoration:underline;的時候，文字和下劃線緊貼在一起，看起來很不舒服。

就像這樣：金玉全王

方法一：text-decoration-skip指定覆蓋關系

text-decoration-skip是與text-decoration相關的CSS3屬性。

效果很不錯，不過缺點在于目前只有Safari8+瀏覽器支持帶-webkit-私有前綴的text-decoration-skip屬性，且僅僅支持skip（默認值）和none兩個值。

此方法是最原生的，但是由于兼容性問題，目前還不太合適。

方法二：使用border-bottom屬性模擬

?我覺得這是一個不錯的想法，CSS博大精深，哈哈。^.^

內聯元素雖然不支持垂直方向的margin屬性，但是支持垂直方向的padding屬性和border屬性，并且，對原來的布局定位等沒有任何影響。因此，配合padding，我們就可以很有效地調節下邊框和文字下邊緣的距離，實現我們最想要的的效果。（張老師的原話）

代碼如下：

a {text-decoration: none;border-bottom: 1px solid; }
效果圖：金玉全王

這樣寫的有點在于border-bottom還有dashed屬性，我們還可以創造虛線下劃線 ?:P

a {text-decoration: none;border-bottom: 1px dashed; }
效果圖：金玉全王
方法三：使用box-shadow屬性模擬

?使用box-shadow的想法也是很棒的，其實動動腦子，CSS還有好多玩法。(●'?'●)

直接上代碼~

a {text-decoration: none;box-shadow: 0 1px; }
這里box-shadow用了兩個值，在這里解釋一下： box-shadow: h-shadow v-shadow blur spread color inset;
此處的兩個值分別是 h-shadow 和 v-shadow。 h-shadow：水平陰影的位置。允許負值。 v-shadow：垂直陰影的位置。允許負值。

垂直陰影為1px于是就有了下劃線的樣子。
相比border-bottom屬性，box-shadow的優勢在于，即使我們把內聯元素設置成display:inline-block，生成的下劃線也不會對垂直對齊或者布局產生影響，但，如果是border-bottom，會增加元素的尺寸，可能就會影響元素的排列。
但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能實線，不能虛線。（張老師原話）

方法四：使用canvas實現（著名的Underline.js）

?Underline.js項目地址：https://github.com/wentin/underlineJS

基本上，適合用在局部一些大的標語，標題，slogon等位置或者追求視覺的官方網站或活動頁面上使用。

其他方法

例如：使用SVG濾鏡處理、使用background-image屬性模擬。

我就不多一一介紹了，感興趣的話可以去張老師的博客查看詳情。

轉載于:https://www.cnblogs.com/nelly0213/p/6760500.html

總結

以上是生活随笔為你收集整理的解决文字与下划线重叠的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。