<span>里面的<a>链接问题

Question

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

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

你看我在里面是为了向右边流动"看到更多",所以我有以下css

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

我希望当我将鼠标悬停在文本"Cat"上时,"See More"会加下划线,但它在IE/Firefox中不起作用,但它可以在Chrome中使用.

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

谁知道为什么？

Answer 1

谁知道为什么？

你在IE和Firefox中看到的实际上是预期的行为,在CSS2.1规范中描述:

请注意,文本修饰不会传播到浮动和绝对定位的后代,也不会传播到原子内联级后代(如内联块和内联表)的内容.

但等等,还有更多:

一些用户代理通过将装饰传播到后代元素来实现文本修饰,而不是如上所述保持恒定的厚度和线位置.这可以说是CSS2中更宽松的措辞所允许的.SVG1,仅限CSS1和仅限CSS2的用户代理可以实现旧模型,并且仍声称符合CSS 2.1的这一部分.(这不适用于此规范发布后开发的UAs.)

鉴于Chrome是CSS2.1浏览器,不管你信不信,它实际上是出现了一个错误(恰好已经修补过了!).这是错误报告.

如果您需要将下划线应用于浮动范围,您还需要明确地应用它a:hover .more:

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