文字和text-decoration:underline下划线重叠问题

2019-09-07 郑州网站建设  

一、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渐变绘制实线或虚线背景图。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1132.html转载请标明出处,谢谢合作!
标签: