Kann nicht in Firefox Links loswerden gepunkteten Umriss erhalten?

Question

Ich habe eine Liste voll von einer 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>

Wenn ich sie in Firefox klicken, gibt es gepunkteten Umriss (wer zum Teufel erfunden, dass und warum? So hässlich!).

Ich will sie los bekommen, aber Stil „Umrisse“, usw. scheinen nicht zu arbeiten, habe ich alle Optionen ausprobiert unter:

#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

Sie müssen die Stile der <a>-Tag (Ihre letzten beiden CSS-Regeln falsch sind anzuwenden, weil Sie die <a> Tag in <img> gesetzt haben.

Dies funktioniert für mich:

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

Oder für nur innerhalb des Elements mit der ID ul (nicht der beste Name, übrigens):

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

Answer 2

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

funktioniert für mich in FF22

Answer 3

Umrisse: 0 sollte es tun und es sollte auf dem <a> Elemente angewandt werden, die nicht wirklich ein Kind von <img /> ist. <img /> ist ein Kind von <a> so Ihre CSS sollte lauten:

#ul li a {
    outline: 0;
}