去除按钮、链接边框黑线小结
来源:互联网 发布:maxwell render mac 编辑:程序博客网 时间:2024/05/18 01:54
也不算什么结吧,被人家总结得很全了,转一下,那个黑框确实很破坏页面美感,除之而后快!
前段时间在论坛上看到有关去除”链接/按钮”虚线框的讨论, 在这里把自己所知的方法记录一下, 并作出了对比.
方法一: IE 下使用expression(this.hideFocus=true), firefox下使用outline: none; (除了FF下对按钮不生效, 其它均有效) 代码:…
css:.hideFocus{hide-focus: expression(this.hideFocus=true);}/* for ie 5+ */
.hideFocus{outline: none;} /* for firefox 1.5 + */
html:<a href="#" class="hideFocus">我是链接, 我不想要虚线</a>
<br/><br/>
<input type="button" value="我是按钮, 人家也不想要虚线嘛" />
这个方法的缺点是IE下使用expression, 增加了浏览器负担, 而且ff下对按钮也不能生效.
方法二: 使用js onfocus=blur(); 全生效; 代码:
css: 无
html:<a href="#" onfocus="blur()">我是链接, 我不想要虚线</a>
<br/><br/>
<input type="button" value="我是按钮, 人家也不想要虚线嘛" onfocus="blur()" />
这个方法的优点是不需要写任何css代码, 也适应任何情况. 缺点是需要使用js, 而且”链接/按钮”会失去了focus状态, 在一些需要侦测”链接/按钮”focus状态的情况下, 会造成麻烦.
方 法三: 结合outline/border/zoom属性实现 代码:
css:.hideFocus2{outline:0;zoom:1;}
.hideFocus2::-moz-focus-inner{border-color:transparent !important;}/* 让FF下button也生效 */
html:<h3>方法三: 结合outline/border/zoom属性实现</h3>
<a href="#" class="hideFocus2">我是链接, 我不想要虚线</a>
<br/><br/>
<input type="button" value="我是按钮, 人家也不想要虚线嘛" />
这个方法暂时没看出有啥明显的缺点, 但暂时不是很清楚zoom:1;为什么就能让ie6去掉了虚线, 是因为促发了hasLayout吗? 这个问题以后搞清楚后, 会回来记录上.
PS:方法三学习自 “http://bbs.blueidea.com/thread-2929061-1-1.html” , 谢谢楼主分享!
原文地址:http://eosite.javaeye.com/blog/579171
- 去除按钮、链接边框黑线小结
- 去除按钮的边框
- bootstrap按钮的边框问题 去除
- 去除图片链接边框及其链接虚线
- 去除图片链接边框及其链接虚线
- html去除图片链接边框及其链接虚线
- UISearchBar 去掉边框黑线
- .9图片边框黑线意义
- TabBar去除顶部黑线和NavigationBar去除底部黑线
- qt自定义按钮去除边框和背景色
- 微信小程序 —— button按钮去除border边框
- 选项卡去除底部黑线
- 去除UINavigationbar下边的黑线
- 去除 UISearchBar 多余的黑线
- 去除firefox点击链接时的虚线边框
- iOS UILabel 边框出现黑线问题
- Highcharts JS去除Highcharts.com链接和print按钮
- css去除页面点击链接、按钮触发的虚线框
- intel 软件优化学习笔记
- How to Recover Datafile Which Deleted Accidentally in Linux
- JSON与XML的区别
- amd64软件优化学习笔记(未完待续)
- asterisk的sip.conf中nat选项说明
- 去除按钮、链接边框黑线小结
- Selenium-webdriver系列教程(7)———如何处理alert和confirm
- PowerManager详解
- Android 4.0 的镜像文件
- 串口编程
- Flash加入收藏夹,设为首页等使用函数
- oracle伪列示例。在大表中作用尤为明显。
- 如何简单测试Rman的备份恢复功能?
- Eclipse快捷键大全(转载)