Firefoxリンクで点線のアウトラインを取り除くことはできませんか？

Question

私は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>

Firefoxでそれらをクリックすると、点線があります（Heckがそれを発明したのはなぜですか？

私はそれらを取り除きたいのですが、スタイル「アウトライン」などはうまくいかないようです。以下のすべてのオプションを試しました。

#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

スタイルをに適用する必要があります <a> タグ（後者の2つのCSSルールは間違っています。 <a> 内部のタグ <img>.

これは私にとってはうまくいきます：

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

または、IDを持つ要素の内側のみ ul （ちなみに、最高の名前ではありません）：

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

Answer 2

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

FF22で私のために働いています

Answer 3

アウトライン：0 それをする必要があり、それは <a> 要素は、実際にはの子供ではありません <img />. <img /> の子供です <a> したがって、あなたのCSSは読む必要があります：

#ul li a {
    outline: 0;
}