Removendo a borda indescritível da imagem no Chrome/IE9

Ao exibir imagens no Chrome ou IE9, você pode encontrar uma borda fina persistente, apesar da configuração “outline: none” e “border: none” em CSS. Esse problema surge devido a um comportamento peculiar do Chrome que substitui "border: none".

Para neutralizar isso, você pode empregar uma técnica inteligente que envolve definir a largura e a altura da imagem como 0px e preenchê-la com valores de pixel correspondentes para o tamanho de botão desejado. Considere o seguinte exemplo de CSS:

#dlbutn {
    display: block;
    width: 0px;
    height: 0px;
    outline: none;
    padding: 43px 51px 43px 51px;
    margin: 0 auto 5px auto;
    background-image: url(/images/download-button-102x86.png);
    background-repeat: no-repeat;
}

Ao enganar o Chrome fazendo-o acreditar que não há conteúdo visível nessas dimensões, você efetivamente elimina a borda. Essa técnica garante compatibilidade entre vários navegadores e permite exibir imagens sem bordas desagradáveis ​​no Chrome.