Firefox Anchor Outline Problème

L'extrait suivant me cause un problème de qualité.Firefox Anchor Outline Problème

<div id="links-container"> 
    <ul> 
    <li class="resource-link li-sep"><a href="http://www.somesite.com/members/category/?catID=8" target="_blank"><em>Enjoy family-friendly</em>ACTIVITIES AND ATTRACTIONS <span>&raquo;</span></a></li> 
    <li>...etc...</li> 
    </ul> 
</div>

J'ai essayé ceci en CSS, mais rien ne fonctionne;

#links-container ul li a { color:#C28234; } 
#links-container ul li a span { font-size:140%; line-height:1em; } 
#links-container ul li a em { display:block; font-family:Georgia; font-weight:normal; margin-bottom:-6px; } 
#links-container ul li a:focus em, #links-container ul li a:active em { outline:none; } 
#links-container ul li a:hover { color:#75450A; }

Ce qui se passe est que dans Firefox, lorsque vous onglet à travers les liens, il est la création de lignes autour de deux ensembles de textes qui ont très proches les uns des autres et sont à l'origine des contours qui se chevauchent.

Nos chefs de projet souhaitent garder les grandes lignes pour promouvoir l'accessibilité.

Si vous l'affichez dans Chrome, il entourera tout le contenu de l'ancre dans un contour. Et nous considérons que c'est parfait. Ma question est, peut quelque chose être fait qui peut répliquer cela dans Firefox. Ou à tout le moins, nettoyez-le pour que le contour ne ressemble pas à du fumier lorsque Firefox décrit individuellement chaque élément de texte dans le même lien.

Quelqu'un d'autre doit-il s'occuper de cela? Si oui, comment avez-vous passé?

Merci

Source

2011-11-11 Skittles

bien. C'est une solution partielle, mais peut fonctionner dans votre cas. Si vous avez un problème avec les éléments de menu seulement, vous pouvez appliquer "display: inline-block;" aux liens ici, pour lui faire un contour commun.

Exemple: jsfiddle.net/zDbsQ/2/

EDIT: Lien fixe l'exemple, original était faux.

Source

2011-11-11 22:39:44

Merci Alexey! Les liens dans la référence ne sont pas des éléments de menu, mais plutôt une liste de liens dans une liste standard. Si vous examinez votre exemple Fiddle avec Chrome & onglet jusqu'à ce que ce lien soit mis en évidence, vous verrez comment Chrome présente les liens multilignes en un seul plan. Alors que Firefox va emballer chaque élément de texte séparément. Par souci de ne pas avoir de mauvais liens, j'aimerais réaliser ce que Chrome est en train de faire. Est-ce que c'est possible? – Skittles

Malheureusement, je ne trouve pas de solution qui fonctionne en tant que navigateurs Webkit, peut-être existe-t-elle, mais je ne sais pas à ce sujet. J'ai corrigé l'exemple (il n'avait pas "display: inline-block;" pour une raison quelconque), c'est mieux que j'ai pu faire jusqu'ici. –

Alexey ... J'essaie toujours de voir ce que tu as changé, mais quoi que tu aies fait EXACTEMENT ce dont j'avais besoin! Merci beaucoup! Travail remarquable! – Skittles

Vous pouvez simplement utiliser:

#links-container ul li a *{ outline: none; }

Cela sélectionnera tous éléments dans un un et désactiver le contour ..

Source

2011-11-11 22:34:10 Kyle

Firefox Anchor Outline Problème

Répondre

Questions connexes