outline是css3的一个属性,用的很少。
声明,这是个不能兼容的css属性,在ie6、ie7、遨游浏览器都不兼容。
outline控制的到底是什么呢?
当
聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。当你取消焦点的时候,这个虚线框就会自然
消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果,所以看不到。下面是
outline的样子示例,也是我正在做的一个页面上截取出来的。
这个就是a标签被聚焦后出现了虚线框,也就是outline;
基
本上这个是没有用的效果,大多数情况下我们会希望不要出现这种效果,于是给a标签设置outline:none;很遗憾的是,ie6、7和遨游浏览器里都
不能实现,只有ff,ie8在加了outline:none后会取消聚焦的虚线框。所以我说这个Outline属性基本就是一个费属性。
怎么样才能取消这个虚线框呢?常用方法有三种:
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());}
分享到:
相关推荐
链接的虚线框影响整体风格,我们在工作经常会将它去掉,而采用图片高亮的方式来显示焦点状态。然而去掉虚线框在两种浏览器中却分别对待,这种技巧经常用到,作个记录,以备不时之需
全 局控制 CSS实现 a{blr:[removed]this.onFocus=this.close());} /* 只支持IE,过多使用效率低 */ a{blr:[removed]this.onFocus=this.blur());} /* 只支持IE,过多使用效率低 */ a:focus { -moz
本文使用JS、CSS、标签属性等方式去除IE链接上的虚线框,方法很简单,大家可以选择使用
简单方法:ul左侧边距设定及div中每行实现虚线 复制代码代码如下: body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{ margin:0; padding:0;} h1,h2,h3,h4,h5,h6{ font-size:100%; font-...
传统办法,在标签内加属性 代码多,修改难<a>link1</a> <a>link1</a> <a>link1</a> <a>link1</a> <a>link1</a> 非标准 中级办法,全局控制 CSS实现 增加IE负担,不推荐使用 a{
scrubber 去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 scrollablearea 使用层制作IE中可控制上下滚动的看板 right_click_menu_builder 右键菜单扩展功能 ...
去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 scrollablearea 使用层制作IE中可控制上下滚动的看板 right_click_menu_builder 右键菜单扩展功能 flashtext 制作仿...
ie55_scroll 自定义浏览器滚动条的特效CSS Marquee 插入滚动文字效果 scrubber 去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 ...
scrubber 去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 scrollablearea 使用层制作IE中可控制上下滚动的看板 right_click_menu_builder 右键菜单扩展功能 ...