no puede deshacer el texto-decoración para niños-elementos

Question

Digamos que tiene este código HTML:

<a href="#"> 
    This is underlined 
    <span> 
     This isn't. 
    </span> 
</a> 

Y esto css:

a:hover { 
    text-decoration: underline; /* I know, this is enabled by default. */ 
} 

a:hover span { 
    text-decoration: none !important; 
} 

¿Por qué la a> elemento span todavía tiene un subrayado. Estoy bastante seguro de que realmente deberías haber deshecho la decoración usando 'ninguno'. Sé que se puede lograr el resultado que quiero a través de este:

<a href="#"> 
    <span class="underlined"> 
     This is underlined 
    </span> 
    <span> 
     This isn't. 
    </span> 
</a> 

además este CSS:

a:hover { 
    text-decoration: none; 
} 

a:hover span.underlined { 
    text-decoration: underline; 
} 

Pero ... simplemente no tiene sentido para mí por qué no se puede desarma la decoración de texto de un elemento hijo. Entonces, ¿por qué ...?

Editar: Inline-bloques

Según @amosrivera, funciona cuando se utiliza inline-block. ¡Puedo confirmar esto para trabajar en Safari y Chrome!

a:hover span{ 
    text-decoration:none; 
    display:inline-block; 
} 

Como se mencionó, esto funciona para Safari y Chrome, pero no para Firefox. La siguiente solución funciona para Firefox, pero no para Safari y Chrome ...

a:hover span{ 
    text-decoration:none; 
    display:block; 
} 

Poco vector:

CSS-Rule   | Webkit | Firefox | Opera | IE  
-------------------------------------------------------------------------------- 
display: block;   |  x  |    |  ?  |  ?  
display: inline-block; |    |  x  |  ?  |  ? 

Answer 1

Tiene que ver con el hecho de que span es un elemento en línea. Prueba esto:

a span{ 
    text-decoration:none; 
    display:inline-block; 
} 

demostración en línea:http://jsfiddle.net/yffXp/

ACTUALIZACIÓN

En FF (4?) Sólo display: block obras (que al mismo tiempo en webkit doesn' t), causa un salto de línea.

ACTUALIZACIÓN 2 (piratear?)

a span{ 
    display:inline-block; 
    background:#fff; 
    line-height:1.1em; 
} 

La superposición del fondo blanco de la frontera no es bonito pero parece hacerlo.Funciona en todos los navegadores que no sea IE 6,7

demostración en línea:http://jsfiddle.net/yffXp/6/

Answer 2

Puede haber algún modo multi-navegador increíblemente estrafalario para hacerlo, pero yo sólo iría con esto (una variante de la solución en su pregunta), por el bien de la cordura:

simplemente funciona: http://jsfiddle.net/KrepM/1/

HTML:

CSS:

a:hover { 
    text-decoration: none 
} 

a:hover span { 
    text-decoration: underline 
} 

Answer 3

Como solución, usaría @ thirtydot es uno, pero en lo que se refiere al problema, creo que usted está buscando en el camino equivocado.

Compruebe lo siguiente fiddle: Como puede ver, la parte no decorada no está decorada con el color indicado; lo que está viendo es el color de su padre que se extiende hasta el final del elemento (como los espacios en un a están subrayados también). Entonces, el navegador realmente está haciendo lo que le estás diciendo que haga, simplemente no lo ves.

Como referencia, compare el violín anterior con this one. Y adivina qué sucede cuando cambias el color del span al background colour ...

Answer 4

Me encontré con este problema hoy, pero para los pseudo elementos, lo que equivale a la misma situación y pude encontrar una solución. Establezca overflow:hidden; en el elemento secundario. Luego, configure su altura del elemento secundario ligeramente más pequeña que la altura para el resto del enlace. Tendrás que jugar con la altura unas cuantas veces para hacerlo bien, pero eventualmente deberías poder hacer que el subrayado desaparezca.

Answer 5

Capté ese problema cuando utilicé una clase para mi enlace.

<a href="#close" class="close">&times;</a> 

Si usara .close en mi css Chrome y Safari seguía recordando el vínculo. Cuando agregué una etiqueta antes del nombre de la clase todo comenzó a funcionar bien.

a { 
    text-decoration: none; 
} 
a.close { 
    color: black; 
}