html - 无法撤消子元素的文本装饰

Question

假设你有这个 html:

<a href="#">
    This is underlined
    <span>
        This isn't.
    </span>
</a>

还有这个 CSS:

a:hover {
    text-decoration: underline; /* I know, this is enabled by default. */
}

a:hover span {
    text-decoration: none !important;
}

为什么 a > span 元素仍然有下划线。我很确定您实际上应该使用“无”取消装饰。我知道你可以通过使用这个来达到我想要的结果:

<a href="#">
    <span class="underlined">
        This is underlined
    </span>
    <span>
        This isn't.
    </span>
</a>

加上这个CSS:

a:hover {
    text-decoration: none;
}

a:hover span.underlined {
    text-decoration: underline;
}

但是...我无法理解为什么您不能取消设置子元素的文本装饰。那么，为什么……？

编辑:内联 block

根据@amosrivera 的说法，当您使用内联 block 时它确实有效。我可以确认这适用于 Safari 和 Chrome!

a:hover span{
    text-decoration:none;
    display:inline-block;
}

如前所述，这适用于 Safari 和 Chrome，但不适用于 Firefox。以下解决方案适用于 Firefox，但不适用于 Safari 和 Chrome...

a:hover span{
    text-decoration:none;
    display:block;
}

小 table :

    CSS-Rule            |    Webkit    |    Firefox    |    Opera    |    IE    
--------------------------------------------------------------------------------
display: block;         |       x      |               |      ?      |     ?    
display: inline-block;  |              |       x       |      ?      |     ?

Answer 1

这与 span 是内联元素这一事实有关。试试这个:

a span{
    text-decoration:none;
    display:inline-block;
}

在线演示: http://jsfiddle.net/yffXp/

更新

在 FF (4?) 中只有 display:block 起作用(同时在 webkit 中不起作用)，导致换行。

更新 2(破解？)

a span{
    display:inline-block;
    background:#fff;
    line-height:1.1em;
}

在边框上覆盖白色背景并不漂亮，但它似乎做到了。它适用于除 IE 6,7

以外的所有浏览器

在线演示: http://jsfiddle.net/yffXp/6/