Как избавиться от границ вокруг и использовать изображение в качестве ссылки в Firefox?

Question

Странный вопрос, я думаю, его больше, я не уверен, как это называется. Но у меня есть img, завернутый в ссылку

пример

...<li>
  <a href="#link">
    <img ...>
  </a>
 </li> .....

Теперь у меня все правила границы css равны 0. Таким образом, у них нет синей границы. Но в Firefox они кажутся розовой мини-пунктирной рамкой, только когда я нажимаю на изображение? В других браузерах нет границ в любое время. Я не уверен, что это из самого браузера или чего-то, чего мне не хватает. В моем CSS я установил границу 0 на a,: hover,: посещения Я даже не поместил текстовое оформление никому, думая, что это может помочь. Но узнать безрезультатно. Я попытался найти помощь в Интернете, но все, что я получил, это информация об удалении границы, вызванной размещением изображения в ссылке. Так что любая помощь или точка в правильном направлении была бы отличной. ! edit // Я добавил картинку, чтобы лучше объяснить, о чем я говорю. альтернативный текст http://i28.tinypic.com/6tme84.jpg

Answer 1

Ссылки (<a>) по умолчанию имеют пунктирный контур вокруг них, когда они становятся «активными» или «сфокусированными». В Firefox 3 цвет определяется цветом текста

Чтобы удалить его, просто используйте:

a {
    outline: none;
}

Или вы можете сделать то, что я делаю, и удалить его из всех элементов (я использую свои собственные правила фокусировки / активные правила) и выполнить

* {
    outline: none;
}

Это удалит его из всех элементов.

Answer 2

#link img a
{
border:0;
outline:none;
}

Answer 3

Установите Firebug и посмотрите, что происходит.Я думаю, что происходит, тег img, вероятно, имеет рамку по умолчанию.

Чтобы удалить его, возможно, вы можете попробовать поместить теги a и img в div с идентификатором и использовать следующий CSS:

Ваш HTML: <pre> <code><div id="test"> <a...> <img .../> </a> </div> И используйте следующий CSS:

<pre> <code>#test img { border-style: none; }