zoukankan      html  css  js  c++  java
  • css去掉a标签点击后的虚线框

    outline是css3的一个属性,用的很少。

    声明,这是个不能兼容的css属性,在ie6、ie7、遨游浏览器都不兼容。

     

    outline控制的到底是什么呢?

    当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。当你取消焦点的时候,这个虚线框就会自然消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果,所以看不到。

     

    基本上这个是没有用的效果,大多数情况下我们会希望不要出现这种效果,于是给a标签设置outline:none;很遗憾的是,ie6、ie7和遨游浏览器里都不能实现,只有ff,ie8在加了outline:none后会取消聚焦的虚线框。

     

    怎么样才能取消这个虚线框呢?常用方法有三种:

    1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框。

    <a href="#" onfocus="this.blur();">测试</a>
    这里设置聚焦时触发blur();强制取消焦点,自然是屡试不爽。

    2:在a标签里嵌套其他标签,比如span 或者var等等,把内容放在被嵌套的标签里。这时候点击这个链接,聚焦的是a的子标签,自然不会聚焦在a标签上,所以也能避免这个问题。

    3:不适用a标签做链接,采用其他标签,使用js做出hover的效果,在css里加入cursour:pointer;设置鼠标以上时变小手。给用户是链接的错觉。使用js做点击时的页面跳转等。最大的缺点是对se友好性比前两种差很多。

    这三种方法的共同点是比较麻烦,相比较而言,推荐第一种,第二第三也视不同的情况而定。也是会用到的。

     

    outline的这个效果时浏览器迟早要取消掉的,所以关于这个属性的知识也相当的鸡肋。

    或者还可以在css中加入body a{outline:none;blr:expression(this.onFocus=this.blur());}


    作者:狂流
    出处:http://www.cnblogs.com/kuangliu/
    欢迎转载,分享快乐! 如果觉得这篇文章对你有用,请抖抖小手,推荐一下!

  • 相关阅读:
    二分练习题4 查找最接近的元素 题解
    二分练习题5 二分法求函数的零点 题解
    二分练习题3 查找小于x的最大元素 题解
    二分练习题2 查找大于等于x的最小元素 题解
    二分练习题1 查找元素 题解
    code forces 1176 D. Recover it!
    code forces 1173 B. Nauuo and Chess
    code forces 1173 C. Nauuo and Cards
    吴恩达深度学习课程笔记-15
    吴恩达深度学习课程笔记-14
  • 原文地址:https://www.cnblogs.com/kuangliu/p/3462229.html
Copyright © 2011-2022 走看看