< span>在< a>内部链接问题 [英] <span> inside <a> link issue
问题描述
我有一个标题链接，如下所示，
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.
有人知道为什么吗?
推荐答案
有人知道为什么吗?
Anyone know why?
您在IE和Firefox中看到的实际上是预期的行为，在 CSS2.1规范:
What you're seeing in IE and Firefox is actually expected behavior, described in the CSS2.1 spec:
请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级别后代(例如内联块和内联表)的内容.
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
但是等等，还有更多
一些用户代理通过将装饰传播到后代元素来实现文本装饰，这与如上所述保持恒定的粗细和线条位置相反.CSS2的措辞松散，可以说是允许的.SVG1，仅CSS1和仅CSS2的用户代理可以实现较旧的模型，但仍声明符合CSS 2.1的这一部分.(这不适用于在本规范发布后开发的UA.)
Some user agents have implemented text-decoration by propagating the decoration to the descendant elements as opposed to preserving a constant thickness and line position as described above. This was arguably allowed by the looser wording in CSS2. SVG1, CSS1-only, and CSS2-only user agents may implement the older model and still claim conformance to this part of CSS 2.1. (This does not apply to UAs developed after this specification was released.)
鉴于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>内部链接问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
