El contorno de la discordia
Uno de los pocos detalles que le he visto a Firefox, responde a un tema con los links. En realidad, aparece siempre que el foco está sobre un elemento (formularios, enlaces) para llamar la atención y destacarlo por sobre otros. Se dibuja una línea punteada alrededor de nuestro elemento, y lo he notado muy claramente en Firefox, ya que Safari (browser que uso por defecto) no lo despliega si no lo explicito. Otro dato sobre este contorno, o outline: a pesar de que despliega un borde alrededor, no responde al modelo de caja, o sea, no ocupa espacio interior o exterior. O sea, que no debemos de considerarlo al diagramar con cajas, ya que no modifica nuestros anchos o altos.
Pues con todo esto, a lo que voy es que lo podemos controlar a través de CSS, mediante la propiedad outline. Se declara tal como un borde:
a {
outline: 1px solid black;
}
Mi problema es que está declarado por defecto en Firefox en la peudo-clase :hover, lo que me molesta bastante, principalmente cuando el elemento que contiene el link (y por lo tanto el outline) está posicionado con relación al margen. Fíjense en el ejemplo, en el enlace del medio y se darán cuenta a lo que me refiero (hagan click sobre él con Firefox y verán el susodicho borde contorno).
Bueno, la solución final reside en quitarlo de raíz. Se declara que para todos los links, en todas las instancias (lo que involucra las 4 pseudo-clases a:link, a:visited, a:hover, a:active) este contorno desaparezca:
a {
outline: 0;
}