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

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

CSS 去除浏览器默认 轮廓外框

 在默认情况下，点击 a 标签，input，或者添加click事件的时候，浏览器留下一个轮廓外框（chrome之下为蓝色）~ 然而这些默认的轮廓外框，有时候很影响美观，并不是我们想保留的。 我们应如何消除这些讨厌的 轮廓外框呢？

使用outline:none去除轮廓外框

如：

a{ outline:none; }

PC端轮廓外框消失了，然而发现在手机上依然存在~~

这时候添加如下代码便可

a{
     outline:none; 
     -webkit-tap-highlight-color:rgba(0,0,0,0);
}

默认样式加overflow:hidden处理

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

添加如下代码便可

　　a{

　　　　overflow:hidden;

　　}

 

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

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

添加如下代码便可

　　a{

　　　　outline:none;

　　}

 

 

　　a:focus{

　　　　outline:thin dotted;

　　}

 

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

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

添加如下代码便可

 

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

 

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

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

添加如下代码便可

　　a{

　　　　outline:none;

　　}

　　a:focus{

　　　　outline:thin dotted;

　　}

　　a:active{

　　　　outline:none;

　　}

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

仅仅使用:active还有一点小小的问题，

添加如下代码便可

 　　a:active{

　　　　outline:none;

　　}

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

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

添加如下代码便可

　　a:hover,a:active{

　　　　outline:none;

　　}