CSS線通不上套跨度禁用

CSS：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上的東西很奇怪，有序列表的數字不會顯示。

我的要求：單詞「世界」不應該有它的線。

來源

2012-05-07 KBN

這是相當奇怪。它是跨瀏覽器的。 Chrome，FF，IE9。關於jsFiddle「古怪」：如果你取消選中* Normalized CSS *，它們會出現。檢查它會激活重置CSS。 – kapa

http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element和http://stackoverflow.com/questions/1823341/how- do-i-get-this-css-text-decoration-override-to-work – BoltClock

@bažmegakapa＆BoltClock謝謝你的信息。 – KBN

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

原因：未知

來源

2012-05-07 08:30:18 KBN

我在上面的評論中鏈接到的兩個副本中陳述了原因。你根本無法撤消其子女內的父母文字裝飾。 – BoltClock

@BoltClock，謝謝你的信息 – KBN

CSS線通不上套跨度禁用

回答

相關問題