html - Cannot undo text-decoration for child-elements

Question

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 using 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       |      ?      |     ?

Answer 1

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/