L'intervallo all'interno di td non sovrascrive lo stile td

Question

Ho un tag span all'interno di uno td. Lo td ha una classe con CSS per impostare lo text-decoration su underline, mentre lo span imposta lo text-decoration su none. Mi aspetto che il testo all'interno del span non sia sottolineato, ma per qualche motivo lo è. Perché?

.u { 
 
    text-decoration: underline; 
 
} 
 

 
.no-u { 
 
    text-decoration: none !important; 
 
}

<table> 
 
    <tr> 
 
     <td class="u"> 
 
      <span class="no-u" style="text-decoration: none !important;">My Text</span> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 1

Impossibile rimuovere lo stile sottolineato per discendenti.

http://www.w3.org/TR/CSS21/text.html#lining-striking-props

La proprietà 'text-decoration' su elementi discendenti non possono avere alcun effetto sulla la decorazione della antenato.

Answer 2

Secondo le specifiche CSS2, http://www.w3.org/TR/CSS21/text.html#lining-striking-props:

Per i contenitori di blocco che stabiliscono un contesto di formattazione in riga, le decorazioni vengono propagate a un elemento inline anonima che avvolge tutti i bambini a livello di riga nel flusso del contenitore del blocco.

Ciò significa che che qualsiasi testo e qualsiasi elemento inline come <b>, <em> e <span> sono tutti avvolti in una scatola in linea anonima su cui è applicata la decorazione del testo.

Inoltre, nel caso di un elemento inline child, è possibile applicare un'altra decorazione di testo che consente di visualizzare sia underline che overline su un intervallo di testo. In questo caso, la sottolineatura dipinta su una scatola anonima in linea e la linea di contorno è dipinta su una seconda scatola anonima (annidata) in linea.

In questo esempio, l'elemento td funge da contenitore del blocco.

Tuttavia, questo non si applica a inline-blocks.

Vedere la demo: http://jsfiddle.net/audetwebdesign/MSUHx/