IE悬停/焦点/活动锚点和跨度,没有javascript

时间:2010-10-17 12:23:33

标签: css internet-explorer hover focus

目前正在尝试使用背景图片,悬停和活动阶段创建最佳锚点。这就是我现在所拥有的。它可以在所有浏览器中正常工作,除非在IE中按下span(15px左侧工作正常,因为它是锚)。以下是示例link text。有任何想法吗?我想保留当前的代码,没有绝对,没有javascript。我可以将CSS属性添加为span:active或focus,但这样就无法更改anchor的background-position。

这是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;}

让我们看看你所知道的事情:)

1 个答案:

答案 0 :(得分:0)

IE似乎无法理解:active元素的子元素规则。 但是,您可以将此伪类应用于<span>,这将适用于IE&gt; 7。

我正在搜索IE的问题&lt; 8 ^^