Impossibile sbarazzarsi di contorno tratteggiato nei collegamenti di Firefox?

Question

Ho una lista completa di un imgs:

<ul>
<li><a href="#"><img src="test.png" /></a</li>
<li><a href="#"><img src="test.png" /></a</li>
<li><a href="#"><img src="test.png" /></a</li>
(...)
</ul>

Quando faccio clic su di loro in Firefox, c'è bordo punteggiato (chi diavolo ha inventato questo e perché? Così brutto!).

Voglio sbarazzarsi di loro, ma lo stile "contorni", ecc non sembra al lavoro, ho provato tutte le opzioni qui sotto:

#ul li img:active {
    -moz-outline-style: none;
    -moz-focus-inner-border: 0; 
    outline: none;
    outline-style: none;
}     

#ul li img:focus {
    -moz-outline-style: none;
    -moz-focus-inner-border: 0; 
    outline: none;
    outline-style: none;
}

 #ul li img a:active {
        -moz-outline-style: none;
        -moz-focus-inner-border: 0; 
        outline: none;
        outline-style: none;
    }     

    #ul li img a:focus {
        -moz-outline-style: none;
        -moz-focus-inner-border: 0; 
        outline: none;
        outline-style: none;
    }

Answer 1

È necessario applicare gli stili al tag <a> (i tuoi ultimi due regole CSS sono sbagliato, perché hai messo il tag <a> all'interno <img>.

Questo funziona per me:

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

In alternativa, per solo all'interno del elemento con ID ul (non il miglior nome, tra l'altro):

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

Answer 2

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

lavora per me in FF22

Answer 3

contorni: 0 dovrebbe farlo e dovrebbe essere applicato sull'elemento <a>, che non è in realtà un bambino di <img />. <img /> è un figlio di <a> così il vostro css dovrebbe leggere:

#ul li a {
    outline: 0;
}