Подчеркни ie6-bug. Встроенный элемент в теге <a>

Question

Есть разметка:

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

Есть стили:

a{
    text-decoration: underline;
}

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

Работает во всех интересных мне браузерах. За исключением IE6 . Нижнее подчеркивание под <span> остается .

Как решить эту проблему без изменения разметки.

---

a span{
    text-decoration: none;
}

Не работает.

Answer 1

Попробуйте изменить свой CSS на это:

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

Несмотря на то, что другие опубликовали, text-decoration: none; НЕ работает.

Answer 2

почему бы тебе не попробовать?

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

Я считаю, что это работает для всех браузеров?

---

Попробуйте добавить background: none; к существующему тегу CSS, как показано выше. Я попробую и посмотрю, смогу ли я заставить это работать на IE6.

Answer 3

Чтобы добавить к ответу Elite Gentleman: используйте условный оператор (предпочтительно) или хак с подчеркиванием только для таргетинга IE6:

a span {
  _text-decoration: none;
}

Answer 4

Может ли это работать?

a{
    text-decoration: underline;
}

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