Al maquetar con css un sitio web – por lo general – se suele utilizar un reseteador de css, que deja a cero las propiedades de todos los elementos.

Esto nos permite poder moldearlos a nuestro antojo, permitiendo que en la gran mayoría de los navegadores se visualice de la misma manera.

Sin embargo, nuestro querido Firefox, se guarda una desagradable sorpresa y probablemente más de uno se haya dado cuenta. Y es que cuando tratamos de meter – por ejemplo – dentro de un elemento <button> una etiqueta – por ejemplo un <span>, este nos deja un pequeño padding que nos impide colocar el <span> a nuestro gusto por mucho padding que le quitemos, por lo que terminamos metiendo una posición absoluta y pasamos el trago.

No es una solución que me agrada, ya que un simple padding a cero, debería bastar. Para conseguir arreglar esto, debemos añadir la siguiente línea a nuestro reseteador.

1
2
3
4
5
6
/** Eliminando el padding de los botones **/
button::-moz-focus-inner
{
    padding:0;
    border:none
}

Ahora podemos maquetar a gusto dentro de los elementos <button> sin miedo a nuevas e inesperadas sorpresas … o no ?