2010-07-06 11 views
6

¿Alguien sabe por qué IE6 e IE7 agregan un borde blanco entre un borde button y el fondo?IE7 BOTÓN contorno blanco

Aquí es mi CSS y 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> 

Si intenta esto, verá un borde blanco divertido entre los bordes y el fondo. Esto no aparece en ningún otro navegador, ni siquiera en IE8.

¿Alguien tiene una solución o sugerencia simple sobre lo que estoy haciendo mal?

Gracias!

EDIT: Me acabo de dar cuenta de que cuando hago clic en el botón, aparecen las hormigas que marchan y el borde blanco desaparece. Parece que cuando el botón es :active desaparecen, aunque esto no me ayuda mucho en términos de resolver el problema, tal vez lo haga para otra persona.

Además, lo siento, no puedo proporcionar una pantalla; No tengo lugar para subirlo ahora a través de esta conexión a Internet.

EDIT2: Parece que el borde no es blanco, pero el background-color del botón. Parece que IE está dejando un espacio de 1px entre el borde del botón y la imagen de fondo del botón.

+0

¿Está utilizando un reset.css? Adivinar que probablemente arreglaría esto pero no puede probar ahora mismo. – heisenberg

+0

@kekekela: lo intentaré en este momento. EDITAR: Eso tampoco funcionó ... – tau

+0

Ah, lo siento amigo. =/Lo echaré un vistazo cuando llegue a casa esta noche si no te has dado cuenta para entonces. – heisenberg

Respuesta

1

Asegúrese de que esa frontera no viene de la propia imagen (fondo de la imagen), ajuste el width precisa y height, también intentan establecer el padding a 0 como dijeron @SLaks.

+0

Acabo de probar todos esos (y varias combinaciones de ellos) y ninguno de ellos se deshizo de él. – tau

4

Tuve el mismo problema ... buen truco que parece funcionar al menos para IE: El contorno "blanco" es en realidad el color de fondo de su imagen. Así que configure esto para que sea igual al color de su borde. Si no te importa un borde ligeramente grueso, detente allí. Si el borde ahora es demasiado grueso, establezca el color del borde en el color de fondo de la página.

p. Ej. para mostrar un "borde" negro use este CSS para su botón: fondo: url (./ button_bg.gif) no-repeat; color de fondo: # 000000; borde: 1px sólido #FFFFFF;

+0

No formulé la pregunta originalmente, pero esta solución funcionó para mí. Hace tiempo que me pregunto qué hará ese blanco. la frontera es para. ¡Gracias! – catandmouse