IE6/7下多种方法移除button、input 默认边框和去掉焦点线

当我们使用 <button> 和 <input> 元素时，它们在 IE6/7 下默认会带有边框和焦点框，这会影响我们的网站设计和用户体验。下面是移除默认边框和焦点框的完整攻略。

1. 去掉边框

方法一

使用 CSS 的 border 属性将边框设置为 none，如下所示：

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: none;
}

方法二

使用 CSS 的 outline 属性将边框设置为 none，如下所示：

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    outline: none;
}

2. 去掉焦点框

方法一

使用 CSS 的 outline 属性将焦点框设置为 none，如下所示：

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
    outline: none;
}

方法二

使用 JavaScript 的 onblur 事件将焦点框设置为 none，如下所示:

<button onblur="this.blur()">点击按钮</button>

<input type="button" value="点击按钮" onblur="this.blur()">

<input type="reset" value="重置表单" onblur="this.blur()">

<input type="submit" value="提交表单" onblur="this.blur()">

在这里，我们使用 onblur 事件来调用 blur() 方法，将焦点从元素上移开，从而去掉焦点框。

需要注意的是，这种方法只适用于单个元素。如果需要批量处理多个元素，可以使用 jQuery 等 JavaScript 库来实现。