在IE和Firefox下,点击超链接时会产生一个虚线框,
虽然几乎所有的网站都会有,
可是个人觉得非常影响美观(在Chrome和Opera中没有)
细心的同学可能早就发现了,点击whisperer.name上所有的链接是没有这个恶心的虚线框的。
下面我就介绍一下如何在WordPress中实现消除链接元素周围的虚线框。
Firefox中的虚线框很好去除。对于IE浏览器,我们用.htc的脚本文件来解决这个问题。
1、把下面代码保存为一个扩展名为.htc的文件(或者直接下载我的文件):
<public:attach event="onfocus" onevent="example()"/>
<script language="javascript">
function example()
{
this.blur();
}
script>
<script language="javascript">
function example()
{
this.blur();
}
script>
把这个文件上传到你的网站上,得到一个地址。
2、修改你当前主题的style.css文件,追加以下代码:
a {behavior:url(你的.htc文件地址)} /*去除IE中的链接虚线框*/
a:focus{outline:0;} /*去除Firefox中的链接虚线框*/
a:focus{outline:0;} /*去除Firefox中的链接虚线框*/
保存之后就可以了,享受没有虚线框束缚的美感吧。
PS:后来发现这个方法有一个很大的缺点,具体见下面8#的评论。
这里还有另外一个方法,用jQuery实现,方法来自willin
$('a,input[type="submit"]').bind('focus',function(){if(this.blur){ this.blur();}});
顺便说,如果用 noConflict, $ 要还原 jQuery, 不能用 $,$(’a,input[type="submit"]‘)…..要改成 jQuery(’a,input[type="submit"]‘)…..
大家还可以参考下这篇文章:http://www.blueidea.com/tech/web/2009/6727.asp
有虚线框么,呵呵,这个我都没注意过。