css - IE 悬停/焦点/事件 anchor 和跨度，无 javascript

Question

目前正在尝试创建具有背景图像、悬停和事件阶段的最佳 anchor 。这就是我现在所拥有的。如果我按跨度，它在所有浏览器中都可以正常工作，但在 IE 中除外(15px 左侧工作正常，因为它是 anchor )。这是示例 link text .有任何想法吗？我想保留当前代码，没有绝对，没有 javascript。我可以将 CSS 属性添加为 span:active 或 focus，但那样无法更改 anchor 的背景位置。

这是 HTML 代码:

 <a href="#" title="Lorem ipsum noster"><span>Lorem ipsum noster</span></a>

这是 CSS 代码:

a {float: left; padding-left: 15px; background: url(i.png) no-repeat -285px 0; text-decoration: none; color: grey; cursor: pointer; overflow: hidden}
a span {float: left; height: 24px; line-height: 22px; padding-right: 30px; white-space: nowrap; background: url(i.png) no-repeat 100% 0; margin-right: -15px;}
a:hover {color: black}
a:active, a:focus {background-position: -285px 1px; color: red;}
a:active span, a:focus span {background-position: 100% 1px; color: red; line-height: 24px;}

让我们看看你知道什么:)

Answer 1

看来 IE 不理解带有 :active 的元素的子元素的规则.但是，您可以将此伪类应用于 <span>这将适用于 IE > 7。

我正在搜索 IE < 8 的问题 ^^