Comment puis-je supprimer le contour des images d'hyperliens?

Lorsque nous utilisons le remplacement de texte en utilisant CSS et donnons un retrait de test négatif, c'est-à-dire text-indent:-9999px. Ensuite, lorsque nous cliquons sur ce lien, la ligne pointillée apparaît comme dans l'exemple d'image ci-dessous. Quelle est la solution pour cela?

Pour Supprimer le contour pour la balise d'ancrage

a {outline : none;}

Supprimer le contour du lien d'image

a img {outline : none;}

Supprimer la bordure du lien d'image

img {border : 0;}

Vous pouvez utiliser la propriété CSS "contour" et la valeur "aucun" sur l'élément d'ancrage.

a {
outline: none;
}

J'espère que cela pourra aider.

Pour Internet Explorer 9:

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

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

Veuillez noter que les styles de focus sont là pour une raison: si vous décidez de les supprimer, les personnes qui naviguent uniquement via le clavier ne savent plus ce qui est mis au point, vous nuire à l'accessibilité de votre site Web.

(Les garder en place aide également les utilisateurs expérimentés qui n'aiment pas utiliser leur souris)

Il y a le même effet de bordure dans Firefox et Internet Explorer (IE) , il devient visible lorsque vous cliquez sur un lien.

Ce code corrigera juste IE:

a:active { outline: none; }.

Et celui-ci corrigera à la fois Firefox et IE :

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

Le dernier code doit être ajouté dans votre feuille de style, si vous souhaitez supprimer les bordures de lien de votre site.

inclure ce code dans votre feuille de style

img {border : 0;}

a img {outline : none;}

J'espère que cela sera utile à certains d'entre vous, il peut être utilisé pour supprimer le contour des liens, des images et du flash et de 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 */
    }

Le code ci-dessous est capable de masquer la bordure de l'image:

    img {
    border: 0;
    }

Si vous souhaitez prendre en charge Firefox 3.6.8 mais pas Firefox 4 ... En cliquant sur un type d'entrée = image peut également produire un contour en pointillé, pour le supprimer dans les anciennes versions de Firefox, ce qui suit fera l'affaire:

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

IE 9 ne permet pas dans certains cas de supprimer le contour en pointillé autour des liens, à moins que vous n'incluiez cette balise Meta entre et dans vos pages:

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

C'est le dernier qui fonctionne sur Google Chrome

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

-moz-user-focus: ignore; dans les navigateurs basés sur Gecko (vous devrez peut-être! important, selon la façon dont il est appliqué)

Utilisez comme ça pour HTML 4.01

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

Vous pouvez mettre overflow:hiddensur la propriété avec le retrait de texte, et cette ligne en pointillé, qui s'étend sur la page, disparaîtra.

J'ai vu quelques articles sur la suppression des contours. Soyez prudent en faisant cela car vous pourriez réduire l'accessibilité du site.

a:active { outline: none; }

Personnellement, j'utiliserais uniquement cet attribut, car si l' :hoverattribut avait les mêmes propriétés css, il empêcherait l'affichage des contours pour les personnes qui utilisent le clavier pour la navigation.

J'espère que ceci résoudra votre problème.

afin de supprimer le lien href du contour pointillé, vous pouvez écrire dans votre fichier css:

a {
   outline: 0;
}

Je parierais que la plupart des utilisateurs ne sont pas du type d'utilisateur qui utilise le clavier comme contrôle de navigation. Est-il alors acceptable d'ennuyer la majorité de vos utilisateurs pour un petit groupe qui préfère utiliser la navigation au clavier? Réponse courte - dépend de qui sont vos utilisateurs.

De plus, je ne vois pas cette expérience de la même manière dans Firefox et Safari. Donc, cet argument semble être principalement pour IE. Tout dépend vraiment de votre base d'utilisateurs et de leur niveau de connaissances - comment ils utilisent le site.

Si vous voulez vraiment savoir où vous êtes et que vous êtes un utilisateur de clavier, vous pouvez toujours consulter la barre d'état lorsque vous tapez sur le site.

Cela fonctionne parfaitement pour moi

a img {border:none;}

Toute image comportant un lien aura une bordure autour de l'image pour indiquer qu'il s'agit d'un lien avec les navigateurs plus anciens. L'ajout de border = "0" à votre balise HTML IMG empêchera cette image d'avoir une bordure autour de l'image.

Cependant, ajouter border = "0" à chaque image prendrait non seulement du temps mais augmentera également la taille du fichier et le temps de téléchargement. Si vous ne voulez pas qu'une de vos images ait une bordure, créez une règle CSS ou un fichier CSS contenant le code ci-dessous.

img {style de bordure: aucun; }

Je ne sais pas si c'est toujours un problème pour cette personne, mais je sais que cela peut être pénible pour de nombreuses personnes en général. Certes, les solutions ci-dessus fonctionneront dans certains cas, mais si vous utilisez, par exemple, un CMS comme WordPress et que les contours sont générés par un plugin ou un thème, vous n'aurez probablement pas ce problème résolu, en fonction de comment vous ajoutez le CSS.

Je suggérerais d'avoir une feuille de style distincte (par exemple, utilisez le plugin ' Lazyest StyleSheet ') et entrez le CSS suivant pour remplacer le style appliqué par le plugin (ou le thème) existant:

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

L'ajout de ' ! Important ' à la règle spécifique en fera une priorité à générer même si la règle peut être ailleurs (que ce soit dans un plugin, un thème, etc.).

Cela permet de gagner du temps lors du développement. Bien sûr, vous pouvez rechercher la source d'origine, mais lorsque vous travaillez sur de nombreux projets, ou devez effectuer des mises à jour (où vos modifications peuvent être remplacées [ non suggérées! ]), Ou ajouter de nouveaux plugins ou thèmes, c'est le meilleur recours pour gagner du temps.

J'espère que cela aidera ... Paix!

Si la solution ci-dessus ne fonctionne pour personne. Essayez ceci aussi

a {
 box-shadow: none;
}

Oui, nous pouvons utiliser. CSS réinitialisé au fur a {outline:none}et à mesure

a:focus, a:active {outline:none} pour la meilleure pratique de réinitialisation CSS, la meilleure solution utilise commun :focus{outline:none}Si vous avez toujours la meilleure option, veuillez partager