2011-10-24 39 views
7

En mi sitio web, hay muchos botones. Al ver en Chrome, el ancho del botón solo cabe en el texto del botón dinámico, pero en IE, puedo ver que se producen almohadillas adicionales en ambos lados ...Eliminar el relleno adicional en el botón IE

¿Habría alguna regla de CSS que me permitiera llevar estos relleno? Gracias.

+0

¿Qué versión de IE está utilizando y en qué modo lo está ejecutando ?; p.ej. '' – Rich

+0

Los problemas de representación de Internet Explorer son casi un arte oscuro. Sugiero que agregue un ejemplo en vivo y brinde más información sobre qué sabor de Internet Explorer representa el problema. Debería poder ver lo que sucede con el Inspector de Internet Explorer, no es tan avanzado como el que ofrecen los Navegadores modernos como Chrome, pero le dará una idea de lo que está sucediendo. – MarioRicalde

Respuesta

15

Puede ser un poco tarde, pero cuando busqué lo que para el mismo problema hoy he encontrado this question. Obviamente, esto no es un relleno real (en el sentido de que no se puede desactivar por padding:0px), sino más bien una de esas extrañas rarezas que a todos nos encanta de IE. (Observe cómo el relleno falso se escala con la longitud del texto del botón O_o). Afortunadamente, hay una solución simple para él, como se describe en here.

Básicamente, solo agrega overflow:visible; al botón (no necesitaba el extra width:auto; como se describe allí). No preguntes, no es lo que hubieras pensado que esto debería hacer, pero bueno ... Es IE Land y las reglas son diferentes allí. Simplemente tenga en cuenta que esto aparentemente no funciona cuando los botones están dentro de una celda de la tabla.

Supongo que el restablecimiento de CSS podría haber resuelto esto, porque alguien ya lo ha incluido en alguna declaración global. Simplemente agregando esta respuesta para arrojar más luz sobre cómo y por qué.

Nunca te rindas, la gente - nuestros hijos verán un mundo sin peculiaridades IE ... Uno puede esperar.

+1

Oh, Dios mío, esta es una solución ridícula, pero funciona. – jlarson

+0

¡Gracias, este fue el truco! – ClearCloud8

+0

Esto funcionó para mí también. 'Fantasma' relleno. Gracias a los programadores de IE8: son otras pocas horas de mi vida que has perdido. –

0

Gestionado para evitar el espaciado adicional en IE con visualización extra de sentencias: bloque; en el CSS de este modo:

.menu button{ 
    display:block; 
    width:100%; 
    padding:0; 
} 

Tenga en cuenta que yo no uso width: auto ya que no era una opción en mi caso - botones están vacías, el ancho se toma de div padre.

Cuestiones relacionadas