Span in td не переопределяет стиль td

Question

У меня есть span тег внутри td. У td есть класс с CSS, чтобы установить text-decoration на underline, а span устанавливает text-decoration на none. Я ожидаю, что текст внутри span не будет подчеркнут, но по какой-то причине он есть. Зачем?

.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

Невозможно удалить подчеркнутый стиль для потомков.

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

Свойство «текст-украшение» на узлах не может иметь никакого влияния на декоре предка.

Answer 2

Согласно спецификации CSS2, http://www.w3.org/TR/CSS21/text.html#lining-striking-props:

Для блок-контейнеров, которые устанавливают контекст инлайн форматирования, украшения распространяются на анонимный строковый элемент, который охватывает все дочерние инлайн-уровня в потоке контейнера блока.

Это означает, что, что любой текст и любой встроенный элемент, как <b>, <em> и <span> все завернуты в анонимном строковом блоке, на котором применяется текст украшение.

Кроме того, в случае дочернего встроенного элемента вы можете применить другое текстовое украшение, которое позволяет вам отображать как подчеркивание, так и надстрочный текст на промежутке текста. В этом случае подчеркивание, нарисованное на одном анонимном встроенном ящике и надстроке, нарисовано на втором (вложенном) анонимном встроенном поле.

В этом примере элемент td действует как контейнер блока.

Однако это не относится к inline-blocks.

Смотрите демо на: http://jsfiddle.net/audetwebdesign/MSUHx/