文本区域/输入焦点上的 IE7 按钮上的黑色边框答案

【问题标题】：Black border on IE7 buttons on textarea/input focus文本区域/输入焦点上的 IE7 按钮上的黑色边框
【发布时间】：2012-01-26 00:23:02
【问题描述】：

我遇到了一个奇怪的 IE7 问题..

我有一些标准的 CSS 样式按钮，带有背景图片和纯色 1px 蓝色边框。除了在 IE7 中，它们按预期工作..

如果我在表单元素 (textarea/input-field) 内单击，它会自动在我的按钮上添加黑色边框。有时它也会发生在元素处于焦点/活动状态的其他情况下。..

你可以在这里看到一个简单的例子

问题是由于样式原因我需要按钮上的边框，所以没有办法在 IE7 中禁用此行为而不删除原始边框 - 无论是使用 CSS 还是 jQuery？

【问题讨论】：

【解决方案1】：

IE 正在突出显示表单的“默认”按钮，如果您在其中一个表单输入中按下回车键，就会触发该按钮。要禁用突出显示，您有几个选项：

将保存按钮设为type="button"而不是type="submit"，并通过javascript中处理按钮的点击事件来处理表单提交。这是this related question 的答案（尽管 ASP.NET 正在处理幕后的 javascript 部分）。
添加 second type="submit" 按钮作为表单中的第一个输入，然后使用 CSS 将其隐藏。请注意，display:none; 不会剪切它，您需要通过将其放置在屏幕外来隐藏它，例如：position: absolute; top: 0; left: -9999px;。这是this related question 的答案。

【讨论】：

【解决方案2】：

基本上您可以使用以下样式简单有效地删除违规边框。

    input[type=submit],
    input[type=reset],
    input[type=button]
    {
        filter:chroma(color=#000000);
        color:#010101;
    }

【讨论】：

虽然它确实删除了黑色边框，但不幸的是它无法在按钮上使用过滤器（例如渐变）
在这种情况下，您可以轻松添加带有渐变的背景图像。是的，这是一种解决方法，但在 IE 中不是什么？
只是我今天发现的：这确实修复了 IE7 中的黑色边框 - 但不 IE10（可能还有 IE9）在“IE7”模式下.由于该模式用于测试，因此这不是真正的问题，而是需要注意的事情。我花了很多时间试图弄清楚为什么它不起作用，最后才尝试实际安装 IE7。该测试模式是 IE7 的近似值，但显然不是完全相同的东西。

【解决方案3】：

jquery：$('input[type="submit"]').focus().blur();

【讨论】：

【解决方案4】：

javascript：

document.getElementById('save').focus();
document.getElementById('save').blur();

【讨论】：