Невозможно отменить текстовое оформление для дочерних элементов

Скажите, что у вас есть этот html:

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

И этот css:

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

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

Почему элемент a > span все еще имеет подчеркивание. Я уверен, что вы действительно должны были отменить украшение, используя "none". Я знаю, что вы можете добиться результата, который я хочу, используя это:

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

плюс этот css:

a:hover {
    text-decoration: none;
}

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

Но... для меня просто не имеет смысла, почему вы не можете отменить текстовое украшение дочернего элемента. Итак, почему...?

Изменить: встроенные блоки

Согласно @amosrivera, он работает, когда вы используете встроенный блок. Я могу подтвердить это для работы в Safari и Chrome!

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

Как уже упоминалось, это работает для Safari и Chrome, но не для Firefox. Следующее решение работает для Firefox, но не для Safari и Chrome...

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

Маленькая таблица:

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

Ответ 1

Это связано с тем, что span является встроенным элементом. Попробуйте следующее:

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

Демо-версия онлайн: http://jsfiddle.net/yffXp/

UPDATE

В FF (4?) работает только display: block (который в то же время в webkit нет), вызывает разрыв строки.

ОБНОВЛЕНИЕ 2 (взломать?)

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

Наложение белого фона на границу не очень красивое, но, похоже, это делается. Он работает в любом браузере, кроме IE 6,7

Онлайн-демо: http://jsfiddle.net/yffXp/6/

Ответ 2

Для этого может быть какой-то невероятный кросс-браузерный способ сделать это, но я бы просто пошел с этим (вариация решения в вашем вопросе) ради здравого смысла:

Он просто работает: 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
}

Ответ 3

В качестве решения я бы использовал @thirtydot, но, насколько проблема, я думаю, вы смотрите на это неправильно.

Проверьте следующее fiddle: как видите, не украшенная часть не украшена цветом; то, что вы видите, это цвет его родителя, который простирается до конца элемента (так как подчеркнуты пробелы в a). Таким образом, браузер действительно делает то, что вы ему говорите, вы просто не видите его.

В качестве ссылки сравните предыдущую скрипту с этим. И угадайте, что произойдет, когда вы измените цвет span на цвет фона...

Ответ 4

Сегодня я столкнулся с этой проблемой, но для псевдоэлементов, которая составляет ту же ситуацию, и я смог найти решение. Установите дочерний элемент overflow:hidden;. Затем установите высоту дочернего элемента немного меньше высоты для остальной части ссылки. Вам нужно будет играть с высотой несколько раз, чтобы получить ее в нужное русло, но в конечном итоге вы сможете убрать подчеркивание.

Ответ 5

Пойманная проблема, когда я использовал класс для моей ссылки.

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

Если я использовал .close в моем CSS-хроме и сафари, он подчеркивал ссылку. Когда я добавил тег перед именем класса, все стало нормально работать.

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