CSSラインスルーは、ネストされたスパンで無効にされていない

Question

CSS：

ol { 
    margin: 0 30px; 
} 
    li { 
     margin: 15px 0; 
    } 
    li.done { 
     text-decoration: line-through; 
    } 
    li.done span { 
     text-decoration: none; 
     background: #ff0; 
    } 

HTML：

<ol> 
    <li class="done">Hello <span>World</span></li> 
    <li>World</li> 
</ol> 

JSFiddleデモ：http://jsfiddle.net/pZye7/5/。そして、JSFiddleに何か変わったことがあっても、順序付きリストの数字は表示されません。

私の要件：「World」という単語には、その上にラインスルーがあってはなりません。

Answer 1

li.done span { 
    text-decoration: none; 
    background: #ff0; 
    display: inline-block; /* This solved the problem.*/ 
} 

理由：不明な