CSS 有什么方法可以删除活动表单中提交按钮周围的IE黑色边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/126445/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Any way to remove IEs black border around submit button in active forms?
提问by Magnar
I am implementing a design that uses custom styled submit-buttons. They are quite simply light grey buttons with a slightly darker outer border:
我正在实现一个使用自定义样式提交按钮的设计。它们是非常简单的浅灰色按钮，外边框稍暗：
input.button {
background: #eee;
border: 1px solid #ccc;
}
This looks just right in Firefox, Safari and Opera. The problem is with Internet Explorer, both 6 and 7.
这在 Firefox、Safari 和 Opera 中看起来恰到好处。问题出在 Internet Explorer 6 和 7 上。
Since the form is the first one on the page, it's counted as the main form - and thus active from the get go. The first submit button in the active form receives a solid black border in IE, to mark it as the main action.
由于表单是页面上的第一个表单，因此它被视为主表单 - 因此从一开始就处于活动状态。活动表单中的第一个提交按钮在 IE 中收到一个纯黑色边框，以将其标记为主要操作。
If I turn off borders, then the black extra border in IE goes away too. I am looking for a way to keep my normal borders, but remove the outline.
如果我关闭边框，那么 IE 中的黑色额外边框也会消失。我正在寻找一种方法来保持我的正常边框，但删除轮廓。
采纳答案by Oli
Well this works here:
那么这在这里工作：
<html>
<head>
<style type="text/css">
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background:none;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<span class="button"><input type="button" name="..." value="Button"/></span>
</body>
</html>
回答by nickmorss
if you dont want to add a wrapper to the input / button then try doing this. As this is invalid CSS then make sre its for IE only. Have the border as per for other browsers but use the filter:chroma for IE...
如果您不想向输入/按钮添加包装器，请尝试执行此操作。由于这是无效的 CSS，因此将 sre 设为仅适用于 IE。与其他浏览器一样具有边框，但对 IE 使用过滤器：色度...
<!--[if IE]>
<style type="text/css">
input {
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->
worked for me.
为我工作。
回答by David Murdoch
I know I'm almost 2 years late to the game, but I found another solution (at least for IE7).
我知道我玩游戏晚了将近 2 年，但我找到了另一个解决方案（至少对于 IE7）。
If you add another input type="submit"to your form beforeany other submit button in the form the problem will go away. Now you just need to hide this new, black-border-absorbing-button.
如果您input type="submit"在表单中的任何其他提交按钮之前添加另一个到您的表单，问题就会消失。现在你只需要隐藏这个新的黑色边框吸收按钮。
This works for me (overflow needs to be "auto"):
这对我有用（溢出需要是“自动”）：
<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />
Note: I am using an HTML5 doctype (<!doctype html>).
注意：我使用的是 HTML5 文档类型 ( <!doctype html>)。
回答by Holf
I was able to combine David Murdoch's suggestion with some JQuery such that the fix will automatically be applied for all 'input:submit' elements on the page:
我能够将 David Murdoch 的建议与一些 JQuery 结合起来，这样修复将自动应用于页面上的所有“输入：提交”元素：
// Test for IE7.
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$('<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />')
.insertBefore("input:submit");
}
You can include this in a Master Page or equivalent, so it gets applied to all pages in your site.
您可以将其包含在母版页或等效页面中，以便将其应用于您站点中的所有页面。
It works, but it does feel a bit wrong, somehow.
它有效，但不知何故，它确实感觉有点不对。
回答by Drew Chapin
I'm building on @nickmorss's example of using filters which didn't really work out for my situation... Using the glow filter instead worked out much better for me.
我正在使用@nickmorss 的示例，该示例使用过滤器并没有真正适合我的情况......使用辉光过滤器对我来说效果更好。
<!--[if IE]>
<style type="text/css">
input[type="submit"], input[type="button"], button
{
border: none !important;
filter: progid:DXImageTransform.Microsoft.glow(color=#d0d0d0,strength=1);
height: 24px; /* I had to adjust the height from the original value */
}
</style>
<![endif]-->
回答by rexusdiablos
I've found an answer that works for me on another forum. It removes the unwanted black border in ie6 and ie7. It's probable that some/many of you have not positioned your input="submit" in form tags. Don't overlook this. It worked for me after trying everythingelse.
我在另一个论坛上找到了一个对我有用的答案。它删除了 ie6 和 ie7 中不需要的黑色边框。很可能你们中的一些人/许多人没有将 input="submit" 放在表单标签中。不要忽视这一点。在尝试了其他所有方法后，它对我有用。
If you are using a submit button, make sure it is within a form and not just a fieldset:
如果您使用提交按钮，请确保它位于表单中，而不仅仅是字段集：
<form><fieldset><input type="submit"></fieldset></form>
回答by Magnar
The best solution I have found, is to move the border to a wrapping element, like this:
我发现的最佳解决方案是将边框移动到环绕元素，如下所示：
<div class='submit_button'><input type="submit" class="button"></div>
With this CSS:
使用这个 CSS：
.submit_button { width: 150px; border: 1px solid #ccc; }
.submit_button .button { width: 150px; border: none; }
The main problem with this solution is that the button now is a block-element, and needs to be fixed-width. We could use inline-block, except that Firefox2 does not support it.
这个解决方案的主要问题是按钮现在是一个块元素，需要固定宽度。我们可以使用 inline-block，只是 Firefox2 不支持它。
Any better solutions are welcome.
欢迎任何更好的解决方案。
回答by Oli
Right, well here's an ugly fix for you to weigh up... Stick the button in a <span>, nuke the border on the button and give the border to the span instead.
是的，这里有一个丑陋的修复方法供您权衡... 将按钮插入 a <span>，将按钮的边框核对，并将边框改为跨度。
IE is a bit iffy about form element margins so this might not work precisely. Perhaps giving the span the same background as the button might help in that respect.
IE 对表单元素边距有点不确定，因此这可能无法准确工作。也许在这方面给予跨度与按钮相同的背景可能会有所帮助。
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background: #eee;
border:0;
}
and
和
<span class="button"><input type="button" name="..." value="Button"/></span>
回答by Oli
I think filter:chroma(color=#000000); as metnioned a wile ago is the best as you can apply in certain class. Otherwise you will have to go and apply an extra tag on every button you have that is if you are using classes of course.
我认为 filter:chroma(color=#000000); 正如之前提到的那样是最好的，因为您可以申请某些课程。否则，当然，如果您正在使用类，您将不得不在您拥有的每个按钮上应用一个额外的标签。
.buttonStyle { filter:chroma(color=#000000); BACKGROUND-COLOR:#E5813C solid; BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; COLOR:#FF9900; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: none; } That did it for me!
.buttonStyle { filter:chroma(color=#000000); 背景颜色：#E5813C 固体；BORDER-BOTTOM：#cccccc 1px 实心；BORDER-LEFT：#cccccc 1px 实心；BORDER-RIGHT：#cccccc 1px 实心；BORDER-TOP：#cccccc 1px 实心；颜色：#FF9900；字体家族：Verdana、Arial、Helvetica、sans-serif；字体大小：10px；字体重量：粗体；文字装饰：无；为我做到了！
回答by Luca Fagioli
This is going to work:
这将起作用：
input[type=button]
{
filter:chroma(color=#000000);
}
This works even with buttontag, and eventually you can safely use the background-imagecss property.
这甚至适用于button标签，最终您可以安全地使用background-imagecss 属性。
