去除虚框
转载请注明来源：https://www.cnblogs.com/hookjc/
方法1，利用.htc文件（好像此方法仅适合IE）：
利用.htc文件来轻而易举地实现成批去除超链虚框。以下内容保存为后缀名为.htc的文件：
1. <public:attach event="onfocus" />
2. <script language="java script">
3. function quit(){
4. this.blur();
5. }
6. </script>
然后，在需要去除超链虚框的页面的<head>和</head>之间加入：
<style type="text/css">
a {behavior:url("htc文件")} /*注意htc文件的存放路径，如果此句放在css文件里更应注意路径问题*/
</style>
如果页面已经有了css文件，只需要将 a {behavior:url("htc文件")} 一句插入里面即可。这样，该页面的超链在点击之后的虚框将不复存在，页面显得干干净净。
方法2，css样式表里加如下代码（此方法可容适合IE和firefox）：
去掉链接时的虚框只要在你的样式表中加入以下代码,就可以去掉链接时烦的的虚框
1. a,area { blr:expression(this.onFocus=this.blur()) } /* for IE7.0及以下版本*/
2. :focus { outline-style: none; } /* for Firefox，IE8.0等 */
注：此方法用在默认提交Button按钮上，在IE7.0及以下版本将失去"Enter"键自动提交功能，所以方法2也可用去清除“提交”按钮自动提交功能！
方法3：去掉默认提交Button外面的虚框，同时保留默认键盘"Enter"键提交功能
1. .button { hide-focus:expression(this.hideFocus=true); } /* for IE7.0及以下版本 */
2. .button:focus { outline-style:none; }/* for Firefox，IE8.0等 */
第一步：准备图片
对于一个好的 UI，一个很重要的方面就是要能及时的与用户发生交互。对于按钮来说，我们需要让按钮相应各种鼠标事件，让用户知道它是可以按下的。如上图，我们要制作的按钮共有三种状态：正常状态、鼠标划过、鼠标按下。通常情况下，我们会想到利用 onclick、onmouseover 这样的事件来控制，而事实上，我们完全可以利用通用性、便捷性更好的 CSS 代替 Javascript 来完成这个过程。尽可能将表现的事情交给 CSS 来做，这也是良好设计的原则之一。
为了能够实现这种效果，我们需要准备三个状态的图片。利用 CSS 的 background-position 属性，我们完全可以将三种状态的图片放在一张图片中，这样可以获得更好的缓存效果。
此外，按钮两侧的圆角也是比较烦人的问题。因为我们要制作的按钮需要能够自动适应内部文字的长度，因此我们需要应用一种叫做“拉门技术 (Sliding door technique)”的 CSS 技巧。具体原理不讲了，这里只介绍具体做法：
我们使用超链接来生成按钮，为了使用 Sliding door technique，我们需要按照如下方式书写 HTML 代码：
< a class = " button " href = " http://some_where " >< span > Button Text </ span ></ a >
随后，我们需要准备两张图片，作为按钮的背景（分别为 span 标签和 a 标签的），具体示意图如下：
这里需要指出，280px 并不是绝对的，它代表了这个按钮在您的应用中可能用到的最大值。此外，所有的值都可以根据您实际的背景图做出更改。
第二步：书写 CSS 代码
为了能够让 A 标签准确的显示我们需要的效果，我们需要设定其 display 属性为 block，但是，很多情况下，我们需要在同一行中显示多个按钮，我们可以通过设定 float:left 或 float:right 来达到。提醒一下，这样设定後，当您放置完按钮后不要忘记 clear 一下 :)。
首先看看显示基本布局的代码，本例中，两侧圆角部分为 10px，按钮高度为 24px，保留区域为 1px：
a.button {
background: transparent url(a.gif) no-repeat scroll right top ;
color: White ;
display: block ;
float: left ;
height: 24 px ;
padding-right: 10 px ;
font: normal 12 px sans-serif ;
margin-right: 10 px ;
text-decoration: none ;
}
a.button span {
background: transparent url(span.gif) no-repeat ;
display: block ;
padding: 5 px 1 px 5 px 11 px ;
line-height: 14 px ;
}
这里需要指出的是：1. 保留区 (1px) 是包含在 SPAN 中的，具体可以注意看 padding 的设置；2. SPAN 的 line-height + padding-top + padding-bottom = A 的 height。
经过这样设定后，我们的按钮的基本样式就完成了，但它还没有交互效果，我们通过设定 a:hover 和 a:active 来实现：
a.button :hover {
background-position: right - 24 px ;
}
a.button :hover span {
background-position: left - 24 px ;
}
a.button :active {
background-position: right - 48 px ;
}
a.button :active span {
background-position: left - 48 px ;
padding: 6 px 0 4 px 12 px ;
}
我们看到，主要是应用了 background-position 属性调整背景图片的位置，这比使用多张图片效果更好。在 a.button:active span 中，我们重新设定了 padding 的值，使字符向右下方移动 1px，按下的效果更明显，这也是之前提到的保留区的作用。
第三部：最后完善
其实做完上面两部，我们的按钮基本上已经完工了。但是在各种浏览器中都有一个讨厌的问题，就是当超链接被点击后，会留下一个讨厌的虚线框。这个破坏美观的东西，我们当然要干掉它。
Firefox、Safari 等支持 W3C CSS2 的浏览器，可以通过设定 CSS 的 outline 属性来做到这一点。在我们这个例子中，只需做如下改动：
a.button :active {
background-position: right - 48 px ;
outline: none ;
}
在 Firefox 中看看，虚框已经消失了。
但 Internet Explore 不吃这一套，对付它就比较麻烦了，单单 CSS 无法解决问题，需要从 HTML 下手。我们需要将按钮的 HTML 代码改为以下形式：
< a class = " button " href = " http://some_where " onclick = " this.blur(); " >< span > Button Text </ span ></ a >
这样，我们可以让超链接在点击后迅速失去焦点，从而避免虚框的出现。当然，如果我们应用中按钮比较少，这个方法还不错。但按钮比较多的情况下，我们还是应该用 DOM 方法来为 className 为 button 的 A 修改 onclick 事件（用 jQuery 或 Prototype 实现会很省心），不过这不在本文讨论的范围内了。
到这里，我们的按钮就算做好了，我相信您一定已经学会了。如果还有什么不明白的地方，您可以参考这个简单的范例，查看它的源代码来解决。当然，您也可以直接在本文後提问，我很乐意为您解答。
