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

Question

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> remains.

How to solve this problem without changing a markup.

---

a span{
    text-decoration: none;
}

Does not work.

Answer 1

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.

Answer 2

Might this work?

a{
    text-decoration: underline;
}

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

Answer 3

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;
}

Answer 4

Try changing your CSS to this:

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

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