Не можете избавиться от пунктирного контура в ссылках 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, появляется пунктирный контур (кто, черт возьми, это придумал и почему? Так ужасно!).

Я хочу избавиться от них, но стиль "контуры" и т. Д., Похоже, не работает, я попробовал все варианты ниже:

#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> (последние два правила CSS неверны, поскольку вы поместили тег <a> в <img>.

Это работает для меня:

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

Или только внутри элемента с идентификатором 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;
}