偷米寄居偷米寄居

...

« ie8新特性的应用 ie7 crash bug »

纯CSS搞定按钮、链接点击时的虚线

深藏多年秘笈大公开,全世界唯一一家公布,怎么点就是点不出,纯CSS去掉按钮或者链接点击产生的虚线。

<style type="text/css">
	.wrap{position:relative;}
	.btns{zoom:1;}
	.btns *{outline:0;zoom:1;background:#f2f2f2;}
	.btns button::-moz-focus-inner{border-color:transparent!important;}
</style>
<div class="wrap">
	<div class="btns">
		<button type="button">确定</button><button type="button">取消</button>
		<a href="#">确定</a><a href="#">取消</a>
	</div>
</div>

看看效果

这个东东是无意中的发现,用处数数也瞒多,像ie下带border的button点击时恶心的表现、去掉tab的点击虚线等等。但遗憾的是这个东东在实践中发现,ie下还是容易受样式环境影响。

这个效果的实现重点在于我在无意中发现了IE下的一个bug,这个bug在特定环境会导致按钮或链接点击时失去虚线。其它浏览器就比较简单,支持CSS2的浏览器可以通过设置outline解决,FF的button标签通过私有属性特别处理,DEMO在多个主流浏览器测试通过。

2009-5-19 19:07 6 comments 5,135 views

Comments

Leave a comment

*
*

Hot Articles

  1. 微格式 Microformats » hCard

    14,199 views

  2. 用hCard添加手机联系人

    8,038 views

  3. ie8新特性的应用

    5,984 views

  4. 纯CSS搞定按钮、链接点击时的虚线

    5,135 views

  5. 神奇!IE下鼠标中轴滚动无效

    4,264 views

New Comments

My Friends