码迷,mamicode.com
首页 > Web开发 > 详细

outline轮廓线在不同CSS样式下的表现

时间:2015-10-14 12:08:57      阅读:831      评论:0      收藏:0      [点我收藏+]

标签:

outline轮廓线在不同CSS样式下的表现

默认

普通的文字链接这是默认状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是默认状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

这里使用了文字偏移技术。一是使用text-indent负值;而是添加内部标签,然后左偏移绝对定位,定位至浏览器可视区域的外部。然而此技术会带来的问题是:焦点区域跟着延伸了,于是会有长长的链接轮廓框。在Firefox浏览器下,点击上面两个文字按钮可见此问题。

默认样式加overflow:hidden处理

普通的文字链接

添加overflow:hidden可以有效解决链接轮廓框被延长的问题。不过,值得一提的是,在Opera浏览器下,第二张图片链接,即使用绝对定位偏移的那个链接的链接轮廓框依旧被拉长了,这可以说是一个bug。

a{overflow:hidden;}

去除链接轮廓框

普通的文字链接这是outline:none状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a标签outline:none状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

添加outline:none可以有效的去除链接轮廓框,这适用于所有的用户(习惯鼠标的以及习惯键盘的)。此样式经常可以在CSS重置(css reset)中看到。

a{outline:none;}

去除链接轮廓框再通过:focus引入

普通的文字链接这是a:focus{outline:thin dotted;}状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a:focus{outline:thin dotted;}状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

通过:focus重新引入outline会使IE和Firefox浏览器下:active的样式重新出现。于是,在单击文字或图片链接的时候,会看到链接轮廓框。在chrome浏览器以及Safari浏览器下,:focus{{outline:thin dotted;}可以准确的替换其默认focus时的样式。但是Opera浏览器不是覆盖原来的focus样式,而是添加,于是会出现双边框。

a{outline:none;} a:focus{outline:thin dotted;}

去除链接轮廓框,通过:focus引入,再由:active消除

普通的文字链接这是a:focus{outline:thin dotted;}a:active{outline:none;}状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a:focus{outline:thin dotted;}a:active{outline:none;}状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

此方法在所有浏览器下都表现良好,点击无链接外框,且不影响focus的外框表现。就是有些啰嗦冗余。还有就是替换了chrome及Safari浏览器的默认focus样式,同样的Opera浏览器下的双边框。

a{outline:none;} a:focus{outline:thin dotted;} a:active{outline:none;}

仅仅使用:active去掉链接外框轮廓线

普通的文字链接这是a:active{outline:none;}状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a:active{outline:none;}状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

这是个简洁高效的方法,可以去除用户点击图片式链接时的外框线的问题,同时保留了习惯使用键盘用户在链接获得焦点时虚框可见。并且不会重置浏览器默认的focus获得焦点的样式,或是产生双边框的问题。可以说是相当完美。

a:active{outline:none;}

使用:hover和:active去掉链接外框轮廓线

普通的文字链接这是a:hover,a:active{outline:none;}状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是a:hover,a:active{outline:none;}状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

一些测试表明,仅仅使用:active还有一点小小的问题,就是用户点击一个链接和这个链接指向的页面加载的过程中,链接外框依旧会出现,这其实也不难理解,链接被点中,也处于:focus状态。由于本测试页面的链接基本上都是在页面自身,所以看不到此问题。一定程度上解决此问题的方法就是添加:hover的outline:none属性。

另外,还有一种情况下,链接外框的问题没有解决,就是当用户点击了一个链接后,再点击浏览器的后退按钮的时候,此时outline就会出现。

a:hover,a:active{outline:none;}

不推荐的IE6-7浏览器去除虚框方法

普通的文字链接这是hidefocus="true"状态下,CSS文字缩进属性text-indent为-1000像素的表现。这是hidefocus="true"状态下,a标签内部span标签绝对定位左偏移-1000像素的表现。

IE浏览器下有个hidefocus="true"的属性,可以去除点击时的IE6和IE7浏览器下虚框,但是也抹杀了键盘用户的focus焦点虚框,个人而言,此方法不推荐。我倒是建议置之一边,不闻不问。

<a href="#" hidefocus="true">链接</a>

outline轮廓线在不同CSS样式下的表现

标签:

原文地址:http://www.cnblogs.com/wepng/p/4876914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!