在嵌套span上未禁用CSS直通 [英] CSS line-through is not disabled on nested span

问题描述

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 Demo : http://jsfiddle.net/pZye7/5/ . And something weird on JSFiddle, ordered list's numbers are not displayed.

我的要求：单词World不应该有换行符。

My requirement : the word "World" should not have the line-through on it.

推荐答案

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

原因：未知

这篇关于在嵌套span上未禁用CSS直通的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！