Antes mesmo de inaugurar oficialmente o novo site fomos avisados por alguns amigos sobre um problema recorrente de sites que utilizam imagens em background de links, através de CSS: uma borda pontilhada no Firefox indicando o campo que detém o foco atual do navegador.

O problema está geralmente associado com as técnicas de “image-replacement”, que são técnicas utilizadas para substituir textos por imagens. Como várias partes de nosso site utilizam essa técnica, fomos pegos pela incômoda “unwanted link border”.

O Problema

O Firefox possui um mecanismo de tabulação em que o campo ou link ativo é destacado com uma borda pontilhada. O recurso é até interessante, e é necessário inclusive que se tome cuidado para não removê-lo de partes importantes do site devido a usabilidade.

Antes de removermos as bordas indesejados, alguns de nossos links ficavam assim, reparem:

removendo-bordas-indesejadas-links-firefox

Exibição de bordas indesejadas em links no Firefox no site da Verticis.

A solução

Depois de pesquisarmos, descobrimos que a solução é mais simples do que se imagina. A borda pontilhada é regida pela propriedade outline do css. Então basta zerarmos o valor dessa propriedade. Em nosso site a solução ficou assim:

/* Reset para evitar bordas indesejadas em links. */
a:hover, a:active, a:focus {
     outline: 0;
}

Com o código acima, as bordas de todos os links serão removidas. Você pode ser mais específico e remover apenas bordas de determinados links. Supondo que você deseja remover todos os links contidos em uma div com id container, seu código CSS ficaria assim:

#container a:hover, #container a:active, #container a:focus {
     outline: 0;
}

É claro que existem diversas maneiras e diversos selectors diferentes que você pode utilizar para remover as bordas. Mas o importante aqui é focar na simplicidade de remover este efeito que em alguns casos pode oferecer uma aparência completamente amadora de seu site.

Espero que seja útil!

Referências

Sharpen Your Site by Removing Unwanted Link Border Outlines

Removing The Dotted Outline