Cannot undo text-decoration for child-elements

Say you have this html:

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

And this css:

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

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

Why does the a > span element still has an underline. I'm pretty sure you should actually have undone the decoration by using 'none'. I know that you can achieve the result I want by usin开发者_如何转开发g this:

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

plus this css:

a:hover {
    text-decoration: none;
}

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

But... it just doesn't make sense to me why you can't unset the text-decoration of a child-element. So, why...?

Edit: Inline-blocks

According to @amosrivera, it does work when you use inline-block. I can confirm this to work in Safari and Chrome!

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

As mentioned, this works for Safari and Chrome, but not for Firefox. The following solution works for Firefox, but not for Safari and Chrome...

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

Little table:

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

It has to do with the fact that span is an inline element. Try this:

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

Online demo: http://jsfiddle.net/yffXp/

UPDATE

In FF (4?) only display:block works (which at the same time in webkit doesn't), causes line break.

UPDATE 2 (hack?)

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

Overlaying the white background over the border is not pretty but it seems to do it. It works in every browser other than IE 6,7

Online demo: http://jsfiddle.net/yffXp/6/

There might be some incredibly zany cross-browser way to do it, but I'd just go with this (a variation of the solution in your question), for the sake of sanity:

It just works: http://jsfiddle.net/KrepM/1/

HTML:

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

CSS:

a:hover {
    text-decoration: none
}

a:hover span {
    text-decoration: underline
}

As a solution, I'd use @thirtydot's one, but as far as the problem is concerned, I think you are looking at it the wrong way.

Check the following fiddle: As you can see the non-decorated part is not decorated with the colour given; what you are seeing is the colour of it´s parent that extends to the end of the element (as spaces in an a are underlined as well). So the browser is really doing what you are telling it to do, you just don´t see it.

As a reference, compare the previous fiddle with this one. And guess what happens when you change the colour of the span to the background colour...

Caught that problem when I used a class for my link.

<a href="#close" class="close">&times;</a>

If I used .close in my css chrome and safari kept underlining the link. When I added a tag before class name everything started working fine.

a {
    text-decoration: none;
}
a.close {
    color: black;
}

I came across this problem today, but for pseudo elements, which amounts to the same situation and I was able to find a solution. Set overflow:hidden; on the child element. Then set your height of the child element slightly smaller than the height for the rest of the link. You'll have to play with the height a few times to get it just right, but eventually you should be able to make the underline disappear.