Question

有谁知道为什么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的间隙。

Answer 1

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

e.g。要显示黑色“边框”，请使用此css作为按钮： background：url（./ button_bg.gif）no-repeat; 背景色：＃000000; border：1px solid #FFFFFF;

Answer 2

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

IE7 BUTTON白色轮廓

2 个答案: