Не могу избавиться от пунктирных контур в Ссылки Firefox?
-
02-10-2019 - |
Вопрос
У меня есть список, полный 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;
}
Решение
Вам нужно применить стили к <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;
}
Другие советы
a:active,
a:focus {
outline: none;
-moz-outline-style: none;
}
Работает для меня в FF22
Схема: 0. должен сделать это, и его следует применять на <a>
элемент, который на самом деле не ребенок <img />
. <img />
это ребенок <a>
Таким образом, ваши CSS следует прочитать:
#ul li a {
outline: 0;
}
Не связан с StackOverflow