Le texte négatif-indent provoque une sélection de lien important sur le clic

Donc, une méthode que j'utilise souvent pour créer de bons liens SEO qui utilisent des images est l'astuce text-indent: -9999px;. Fondamentalement, je crée une ancre au niveau du bloc avec une image d'arrière-plan. J'ai mis son text-indent à un grand nombre négatif donc vous ne le voyez pas et c'est bon pour le référencement. Lorsque je clique sur le lien, le contour de celui-ci tire sur la page (c'est-à-dire qu'il va avec le texte vraiment loin). Je l'ai trouvé ce que est arrivé dans certains cas, la plupart du temps:Le texte négatif-indent provoque une sélection de lien important sur le clic

<div> 
    <a href="#">SEO text</a> 
</div> 

div { 
    width: 100px; 
    height: 100px; 
} 

    div a { 
    display: block; 
    text-indent: -9999px; 
    width: 100px; 
    height: 100px; 
    background: url(stuff) etc...; 
    }

Le code ci-dessus 95% du temps ont seulement le contour lorsque vous cliquez sur le lien juste la zone de 100 x 100px . Cependant, en ne définissant pas les dimensions du parent, il semble tirer sur la page .... Je pense. Mais dans ce cas précis, il a des dimensions sur le parent mais continue à partir de la page. En conséquence, j'ai fait le tour a span { display: none; }, mais je veux savoir comment je peux le faire avec le tour text-indent mais corriger le contour.

Est-ce que quelqu'un sait comment résoudre ce problème? Ai-je besoin d'un autre parent ou dois-je définir une autre propriété CSS?

Source

2009-09-16 Mark Ursino

+1 - quelque chose que j'ai remarqué mais que je n'ai jamais vu. Bonne question –

Est-ce que quelqu'un sait comment faire ceci sans définir "outline: none"? Je m'intéresse à la raison pour laquelle cela ne semble que sporadique, plutôt que d'essayer de faire disparaître les symptômes. Il y a au moins un upvote de moi dedans! –

est ici un great article pour enlever ce contour maudit dans Firefox

simple ajout d'un lien se sentait très paresseux donc ici, ajoutez dans votre CSS:

a 
{ 
    outline: none; 
} 
:focus 
{ 
    -moz-outline-style: none; 
}

Source

2009-09-16 13:17:24

Tout en rendant la page complètement inutilisable sans la souris – Quentin

Il a ses avantages et ses inconvénients, car vous n'obtenez aucun retour sur l'écran lors de la tabulation avec le clavier, mais il résout le problème. Merci beaucoup pour l'info cependant. –

@David: généralement, je vois cela comme donnant une compréhension de la façon dont cela fonctionne, même si le premier exemple de l'article permet de toujours être utilisable sans souris, se débarrasser du contour n'est pas tout ce que vous pouvez faire, vous pouvez changer d'autres attributs de style à l'élément à la place, à savoir: ajouter une bordure, il est donc toujours évident que l'élément est mis en évidence, mais il n'a pas ce contour ridicule tirant sur votre page. –

Just Add overflow: hidden sur votre div a

Source

2009-09-25 14:19:24

Ajoutez overflow:hidden à l'étiquette.

div a { 
    overflow: hidden; 
}

Ceci maintient la bordure du contour, mais uniquement dans les coordonnées spécifiées de l'élément.

En appliquant overflow: hidden sur le div ou outline: none comme Wayne Austin suggests va supprimer complètement le contour qui est un problème d'utilisabilité.

Source

2009-11-25 14:10:50 curlee

Cela devrait être la réponse acceptée - parce que cacher le contour est un non-sens. Facile, mais non-sens :) –

Le texte négatif-indent provoque une sélection de lien important sur le clic

Répondre

Questions connexes