IE7 BUTTON white outline
Does anyone know why IE6 and IE7 add a white border between a button
border and the background?
Here is my CSS and 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>
If you try this, you will see a funny white border between the borders and the background. This does not appear in any other browser, not even IE8.
Anyone have a simple fix or suggestion as to what I'm doing wrong?
Thanks!
EDIT: I just noticed that when I click on the button, the marching ants come up and the white border disappears. It seems as though when the button is :active
they disappear, although this doesn't help me much in terms of solving the problem, maybe it will for someone else.
Also, sorry I cannot provide a screen; I have no place to upload it now via this internet connection.
EDIT2: It actually appears that the border is not white but the background-color
of the button. It appears IE is leaving a 1px gap between the button border and the button background image.
I had the same problem...neat trick that seems to work at least for IE: The "white" outline is actually the background color of your image. So set this to be the same as your border color. If you don't mind a slightly-thick-ish border, stop there. If the border is now too thick, set your border color to the background color of the page.
eg to display a black "border" use this css for your button: background: url(./button_bg.gif) no-repeat; background-color:#000000; border: 1px solid #FFFFFF;
确保边框不是来自图像本身(图像的背景),设置精确的width
和height
,还可以像@SLaks所说的那样尝试将padding
设置为0
。
上一篇: CSS3边框不透明度?
下一篇: IE7按钮白色轮廓