Como posso remover o contorno das imagens de hiperlinks?

Quando usamos a Substituição de Texto usando CSS e fornecemos um teste de indentação negativo, isto é text-indent:-9999px. Então, quando clicamos nesse link, a linha pontilhada aparece como na imagem de exemplo abaixo. Qual é a solução para isso?

Para Remover contorno para tag âncora

a {outline : none;}

Remover contorno do link da imagem

a img {outline : none;}

Remover borda do link da imagem

img {border : 0;}

Você pode usar a propriedade CSS "contorno" e o valor "nenhum" no elemento âncora.

a {
outline: none;
}

Espero que ajude.

Para Internet Explorer 9:

a:active, a:focus { 
 outline: none; 
 ie-dummy: expression(this.hideFocus=true);
}

Fonte: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

Observe que os estilos de foco existem por um motivo: se você decidir removê-los, as pessoas que navegam pelo teclado não sabem mais o que está em foco, então você está prejudicando a acessibilidade do seu site.

(Mantê-los no lugar também ajuda os usuários avançados que não gostam de usar o mouse)

Existe o mesmo efeito de borda no Firefox e no Internet Explorer (IE) , ele se torna visível quando você clica em algum link.

Este código corrigirá apenas o IE:

a:active { outline: none; }.

E este vai consertar o Firefox e o IE :

:active, :focus { outline: none; -moz-outline-style: none; }

O último código deve ser adicionado à sua folha de estilo, se desejar remover as bordas do link do seu site.

inclua este código em sua folha de estilo

img {border : 0;}

a img {outline : none;}

Espero que seja útil para alguns de vocês, pode ser usado para remover o contorno de links, imagens e flash e do MSIE 9:

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

O código abaixo é capaz de ocultar a borda da imagem:

    img {
    border: 0;
    }

Se você gostaria de oferecer suporte ao Firefox 3.6.8, mas não ao Firefox 4 ... Clicar em uma entrada type = imagem pode produzir um contorno pontilhado também, para removê-lo nas versões antigas do firefox o seguinte resolverá:

   input::-moz-focus-inner { 
   border: 0; 
   }

O IE 9 não permite, em alguns casos, remover o contorno pontilhado ao redor dos links, a menos que você inclua esta metatag entre e em suas páginas:

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

Este é o último que funciona no Google Chrome

:link:focus, :visited:focus {outline: none;}

-moz-user-focus: ignore; em navegadores baseados no Gecko (você pode precisar! importante, dependendo de como ele é aplicado)

Use assim para HTML 4.01

<img src="image.gif" border="0">

Você pode colocar overflow:hiddenna propriedade com o recuo do texto, e a linha pontilhada, que se estende para fora da página, desaparecerá.

Eu vi alguns posts sobre como remover todos os contornos. Tenha cuidado ao fazer isso, pois você pode diminuir a acessibilidade do site.

a:active { outline: none; }

Eu pessoalmente usaria este atributo apenas, já que se o :hoveratributo tivesse as mesmas propriedades css, isso evitaria que os contornos fossem exibidos para pessoas que estão usando o teclado para navegação.

Espero que isso resolva seu problema.

Para remover o link href do Contorno pontilhado, você pode escrever em seu arquivo css:

a {
   outline: 0;
}

Aposto que a maioria dos usuários não é o tipo de usuário que usa o teclado como controle de navegação. É então aceitável irritar a maioria dos seus usuários por um pequeno grupo que prefere usar a navegação com teclado? Resposta curta - depende de quem são seus usuários.

Além disso, não vejo essa experiência da mesma forma no Firefox e no Safari. Portanto, este argumento parece ser principalmente para o IE. Tudo realmente depende da sua base de usuários e do nível de conhecimento deles - como eles usam o site.

Se você realmente deseja saber onde está e é um usuário de teclado, pode sempre olhar para a barra de status enquanto digita no site.

Isso funciona perfeitamente para mim

a img {border:none;}

Qualquer imagem que tenha um link terá uma borda ao redor da imagem para ajudar a indicar que é um link com navegadores mais antigos. Adicionar border = "0" à sua tag HTML IMG impedirá que a imagem tenha uma borda ao redor da imagem.

No entanto, adicionar border = "0" a cada imagem não seria apenas demorado, mas também aumentaria o tamanho do arquivo e o tempo de download. Se você não quiser que nenhuma de suas imagens tenha uma borda, crie uma regra CSS ou arquivo CSS que contenha o código abaixo.

img {estilo da borda: nenhum; }

Se a solução acima não funcionar para ninguém. Experimente também

a {
 box-shadow: none;
}

Não tenho certeza se isso ainda é um problema para essa pessoa, mas sei que pode ser uma dor para muitas pessoas em geral. Concedido, as soluções acima funcionarão em alguns casos, mas se você estiver, por exemplo, usando um CMS como o WordPress, e os contornos estiverem sendo gerados por um plugin ou tema, você provavelmente não terá esse problema resolvido, dependendo de como você está adicionando o CSS.

Eu sugiro ter um StyleSheet separado (por exemplo, use o plug- in ' Lazyest StyleSheet ') e insira o seguinte CSS dentro dele para substituir o estilo forçado do plug-in (ou tema) existente:

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

Adicionando ' ! Importante ' à regra específica tornará isso uma prioridade de gerar, mesmo se a regra puder estar em outro lugar (seja em um plugin, tema, etc.).

Isso ajuda a economizar tempo durante o desenvolvimento. Claro, você pode buscar a fonte original, mas quando você está trabalhando em muitos projetos ou precisa realizar atualizações (onde suas alterações podem ser substituídas [ não sugeridas! ]), Ou adicionar novos plug-ins ou temas, este é o melhor recurso para economizar tempo.

Espero que isso ajude ... Paz!

Sim, podemos usar. CSS redefinido como a {outline:none}e também

a:focus, a:active {outline:none} para as melhores práticas em redefinir CSS, a melhor solução é usar o comum. :focus{outline:none}Se você ainda tiver a melhor opção, compartilhe