Buenos días a todos!
Estoy trabajando en un diseño y necesito que se vea lo más parecido posible en Firefox 3.6 e Internet Explorer 8... y tengo una pequeña diferencia de ancho en los botones que no logro solucionar.
Les paso un ejemplo para que vean a que me refiero...
Estos son los estilos. Quitándole el outline a los botones conseguí que tengan casi el mismo tamaño...
Código:
* {
margin: 0;
padding: 0;
outline: 0;
}
button::-moz-focus-inner {
border: 0;
}
button {
border: none;
}
Y estos son los botones...
Código:
<form>
<button type="submit" name="miBoton1" value="1">Mi botón</button>
<button type="submit" name="miBoton2" value="2">Mi botón</button>
</form>
Firefox deja 2 pixeles a la izquierda y a la derecha del texto, lo que hace que mi botón en Firefox sea 4 pixeles más ancho...
Como los botones van tener una imagen adentro, esa pequeña diferencia se nota mucho (además de que soy un poco obsesivo
).
Hasta ahora no he logrado dar con una instrucción CSS que haga que el ancho del botón en Firefox sea el mismo que el del Explorer, sin esos márgenes...
Si alguno tiene idea de que causa ese espacio y como eliminarlo, se lo agradecería...!
