< span>在< a>内部链接问题

问题描述

我有一个标题链接，如下所示，

I have a link for headline, like the following,

<a href="#">Cat<span class="more">See More</span></a>

您看到我有里面的东西，以便向右流动"See More"，所以我有以下css

You see I have inside in order to flow "See More" to the right, so I have the following css

.more {float:right;}
a{text-decoration:none;width:150px;display:block;}
a:hover {text-decoration:underline;}

我希望当我将鼠标悬停在文本"Cat"上时，"See More"会带有下划线，但是在IE/Firefox中不起作用，但在Chrome中却可以.

I expect that when I hover over the text "Cat", the "See More" is underlined, but it does not work in IE/Firefox, it works in Chrome though.

http://jsfiddle.net/ZW9tt/1/

有人知道为什么吗?

推荐答案

您在IE和Firefox中看到的实际上是预期的行为，在 CSS2.1规范:

What you're seeing in IE and Firefox is actually expected behavior, described in the CSS2.1 spec:

但是等等，还有更多

鉴于Chrome是CSS2.1浏览器，信不信由你，它实际上在显示一个错误(恰好已被修补！).这是错误报告.

Given that Chrome is a CSS2.1 browser, believe it or not, it's actually exhibiting a bug (which happens to have just been patched!). Here's the bug report.

如果需要将下划线应用于浮动范围，则还需要将其显式应用于 a:hover.更多:

If you need to apply the underline to the floated span, you'll need to apply it explicitly to a:hover .more as well:

a:hover, a:hover .more { text-decoration: underline; }

这篇关于< span>在< a>内部链接问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！