Pregunta

Tengo una lista completa de una IMG:

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

Cuando les haga clic en Firefox, hay líneas de puntos (quién diablos inventó eso y por qué? Tan feo!).

quiero para deshacerse de ellos, pero de estilo "contornos", etc. no parece trabajo, he intentado todas las opciones a continuación:

#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;
    }
¿Fue útil?

Solución

Es necesario aplicar los estilos a la etiqueta <a> (los dos últimos son reglas CSS mal porque usted ha puesto la etiqueta <a> dentro <img>.

Esto funciona para mí:

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

O, por sólo dentro del elemento con ID ul (no el mejor nombre, por cierto):

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

Otros consejos

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

funciona para mí en FF22

contornos: 0 debería hacerlo y debe ser aplicado sobre el elemento <a>, que no es en realidad un niño de <img />. <img /> es un hijo de <a> por lo que su css debe decir:

#ul li a {
    outline: 0;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top