non può annullare text-decoration per bambini-elementi

Question

Diciamo che avete questo html:

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

E questo css:

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

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

Perché la a> elemento arco ha ancora una sottolineatura. Sono abbastanza sicuro che dovresti aver annullato la decorazione usando 'none'. So che è possibile ottenere il risultato che voglio utilizzando questo:

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

oltre a questo css:

a:hover { 
    text-decoration: none; 
} 

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

Ma ... è semplicemente non ha senso per me il motivo per cui non si può disinserire la decorazione del testo di un elemento figlio. Quindi, perché ...?

Edit: inline-block

Secondo @amosrivera, funziona quando si utilizza inline-block. Posso confermare questo per funzionare in Safari e Chrome!

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

Come accennato, questo funziona per Safari e Chrome, ma non per Firefox. La seguente soluzione funziona per Firefox, ma non per Safari e Chrome ...

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

Tavolino:

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

Answer 1

Ha a che fare con il fatto che span è un elemento inline. Prova questo:

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

Demo in linea:http://jsfiddle.net/yffXp/

UPDATE

in FF (4?) Solo display: block opere (che al tempo stesso in WebKit doesn' t), causa un'interruzione di riga.

UPDATE 2 (hackerare?)

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

Sovrapposizione sfondo bianco oltre il confine non è bella, ma sembra di farlo.Funziona in tutti i browser diverso da IE 6,7

Demo in linea:http://jsfiddle.net/yffXp/6/

Answer 2

Ci potrebbe essere qualche incredibilmente demenziale modo cross-browser per farlo, ma avevo appena andare con questo (una variante della soluzione nella tua domanda), per il bene della sanità mentale:

funziona: http://jsfiddle.net/KrepM/1/

HTML:

CSS:

a:hover { 
    text-decoration: none 
} 

a:hover span { 
    text-decoration: underline 
} 

Answer 3

Come soluzione, userei @ thirtydot n'è uno, ma per quanto riguarda il problema è interessato, penso che si sta guardando nel modo sbagliato.

Verificare il seguente fiddle: Come si può vedere la parte non decorata non è decorata con il colore dato; quello che stai vedendo è il colore del suo genitore che si estende fino alla fine dell'elemento (come sono sottolineati anche gli spazi in uno a). Quindi il browser sta facendo davvero quello che stai dicendo di fare, tu non lo vedi.

Come riferimento, confrontare il violino precedente con this one. E indovina cosa succede quando cambi il colore dello span nello background colour ...

Answer 4

Mi sono imbattuto in questo problema oggi, ma per gli pseudo elementi, che equivale alla stessa situazione e sono stato in grado di trovare una soluzione. Impostare overflow:hidden; sull'elemento figlio. Quindi imposta l'altezza dell'elemento figlio leggermente più piccola dell'altezza per il resto del collegamento. Dovrai giocare con l'altezza un paio di volte per farlo nel modo giusto, ma alla fine dovresti essere in grado di far sparire la sottolineatura.

Answer 5

Catturato questo problema quando ho usato una classe per il mio collegamento.

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

Se ho usato .close nel mio css chrome e safari sottolineato sottolineando il collegamento. Quando ho aggiunto un tag prima del nome della classe, tutto ha funzionato correttamente.

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