Underline ie6-bug. Inline element in <a> tag

There is a markup:

<a href="#">
    lorem ipsum<span>15</span>
</a>

There are styles:

a{
    text-decoration: underline;
}

a span{
    background: #fff;  //To clean the bottom underlining under <span>
}

Works in all interesting me browsers. Except IE6. The bottom underlining under <span&g开发者_StackOverflowt; remains.

How to solve this problem without changing a markup.

a span{
    text-decoration: none;
}

Does not work.

Try changing your CSS to this:

a span {
    background: #fff;
    display: inline-block;
}

Despite what others have posted, text-decoration: none; does NOT work.

why don't you try?

a span{
    background: none;
    text-decoration: none;
}

I believe this works for all browsers?

Try adding background: none; to the existing CSS tag as shown above. I'll try and see if I can't get this to work on IE6.

Might this work?

a{
    text-decoration: underline;
}

a span{
    background: #fff;  //To clean the bottom underlining under <span>
    text-decoration: none;
}

To add to Elite Gentleman's answer: Use a conditional statement (prefered) or the underscore hack for targeting IE6 only:

a span {
  _text-decoration: none;
}