IE7 按钮白色轮廓答案

【问题标题】：IE7 BUTTON white outlineIE7 按钮白色轮廓
【发布时间】：2011-03-12 11:55:14
【问题描述】：

有谁知道为什么 IE6 和 IE7 在button 边框和背景之间添加一个白色边框？

这是我的 CSS 和 HTML：

#reportButton{
    background:#fefcda url(buttonback.png) repeat-x bottom left;
    border-top:2px solid #fffff8;
    border-right:2px solid #e3b40c;
    border-bottom:2px solid #e3b40c;
    border-left:2px solid #fffff8;
    color: #373535;
    font-weight: bold;
    margin:0 2%;
    width:45%;
}

<button id="reportButton">Report a Concern</button>

如果你试试这个，你会在边框和背景之间看到一个有趣的白色边框。这不会出现在任何其他浏览器中，即使是 IE8。

有人对我做错了什么有简单的解决方法或建议吗？

谢谢！

编辑：我刚刚注意到，当我单击按钮时，行进的蚂蚁出现并且白色边框消失了。似乎当按钮为:active 时它们消失了，尽管这对解决问题没有多大帮助，也许对其他人有用。

另外，很抱歉我无法提供屏幕；我现在没有地方通过这个互联网连接上传它。

EDIT2：实际上看起来边框不是白色，而是按钮的background-color。看起来 IE 在按钮边框和按钮背景图像之间留下了 1px 的间隙。

【问题讨论】：

你在使用reset.css吗？猜测这可能会解决这个问题，但现在无法测试。
@kekekela：我现在就试试。编辑：那也没用...
啊，对不起，伙计。 =/ 如果你还没弄明白的话，我今晚回家再看看。
我在黑色背景下，在 IE6、7 和 8（诚然，使用IETester）。无法复制所描述的行为，其中任何一个按钮周围都没有异常边框。你在用什么DOCTYPE，如果有的话？
@tau：我担心可能是这样。对不起，伙计。 :(

标签： html css button internet-explorer-7 internet-explorer-6

【解决方案1】：

我遇到了同样的问题...至少对 IE 有效的巧妙技巧： “白色”轮廓实际上是图像的背景颜色。因此，将其设置为与您的边框颜色相同。如果您不介意稍厚的边框，请停在那里。如果现在边框太厚，请将边框颜色设置为页面的背景颜色。

例如要显示黑色“边框”，请将此 CSS 用于您的按钮：背景：url(./button_bg.gif) 不重复；背景颜色：#000000; 边框：1px 实心#FFFFFF；

【讨论】：

最初没有问这个问题，但这个解决方案对我有用。我一直想知道那个白色边框是干什么用的。谢谢！

【解决方案2】：

确保该边框不是来自图像本身（图像的背景），设置准确的width 和height，还可以尝试将padding 设置为0，就像@SLaks 说的那样。

【讨论】：

我只是尝试了所有这些（以及它们的各种组合），但没有一个能摆脱它。