:active CSS选择器在IE8和IE9中不起作用

Question

这是我的网站，涉及到IT技术相关内容。这是我遇到并解决了一系列跨浏览器问题的最后一个问题，感谢社区的帮助。

基本上，在Internet Explorer 8和Internet Explorer 9中，菜单没有应用:active样式。当按下时，它应该变暗。请告诉我原因并提供修复方法。先感谢了。

- UrBestFriend

---

哦，你指的是哪些:active样式？对我来说，它们在两个版本中都有效。 - BoltClock

@BoltClock：菜单活动状态应该更暗，这样可以与悬停效果区分开来。 - UrBestFriend

我现在明白了，可能之前没注意到。 - BoltClock

@BoltClock：是的，让我困扰的是选择器的顺序是正确的——焦点、悬停然后是活动状态。但出于某种原因，在Internet Explorer中无法应用。 - UrBestFriend

Answer 1

为了保持相关性并节省其他人搜索解决方案的麻烦，我也发现了一个问题在IE <= 10中存在"错误"，即无法将样式应用于:active子元素，例如;

a:active img {
    position:absolute;
    top:-30px;
}

以上内容不会改变图像在IE <= 10的位置，此时您需要在子元素本身上应用:active；

a:active img,
a img:active {
    position:absolute;
    top:-30px;
}

在大多数情况下，这并不是一个完美的解决方案，因为锚点内部的任何文本都需要具有比图像更高的z-index值，这意味着图像仅基于单击图像本身（给图像添加:active状态）才会改变其位置...这让我陷入了困境，但仍然是困境（对于仅使用CSS的解决方案）。

因此，尽管这不是一个修复程序，但更多的是“警告”他人IE中:active伪选择器的缺点。糟糕。 =(

- seemly

---

span:active + span选择器在IE10中也不起作用。请注意，简单的span:active是有效的。 - ruvim

谢谢，@ruvim。回复已更新以反映您确认IE10中的错误。 - seemly

Answer 2

:active 伪类适用于用户正在激活元素的时候，例如，在用户按下鼠标按钮和释放它之间的时间。请参阅 W3 的文档。

但是您将 :active 选择器应用于您的 <li> 元素，这个元素不能有活动状态，因为它从未真正被激活 - 只有在悬停时才会激活。您应该将 :active 状态应用于 <a> <- IE 6 中是正确的。

更新：这里有一个测试样例在 jsFiddle 上，您可以看到它对 <a> 元素有效，但对 <li> 元素无效。

我在这里找到了一些有趣的信息。

:active 伪类应用于用户选择链接时。

CSS1 对此行为有点模糊：“‘active’ 链接是指当前正在被读者选择（例如，通过鼠标按钮按下）的链接。” 此外，在 CSS1 中，:active 与 :link 和 :visited 是互斥的。（而且没有 :hover 伪类。）

CSS2 更改了这一点，使得 :active 的规则可以与 :visited 或 :link 同时应用。并且对其行为进行了更好的解释：“在用户激活元素时应用 :active 伪类。例如，在用户按下鼠标和释放之间的时间内。”

我认为，Firefox 等浏览器比 IE 更符合 CSS2 的规范。但是，由于链接应该加载新页面，因此IE可以合理地说，当新页面加载时，链接仍然处于“active”状态，这就是发生的情况。

您可以在 Firefox 中看到类似的不符合直觉的行为，方法是单击该链接，但将鼠标从链接上移开，同时按住鼠标键。链接不会被激活（不会加载新页面），但链接仍保持在 :active 状态。另一方面，Chrome 和 Opera 取消链接的激活状态，但在不同的时间；Chrome 在鼠标离开链接区域时立即取消，而 Opera 直到鼠标按钮释放时才取消。在此示例中，IE 的行为与 Firefox 相同。（在将鼠标从链接上拖出后按 Enter 键，您将看到更多行为上的差异。）

我不会把这些差异称为“错误”，因为规范存在歧义。

我唯一能提供的解决方法是接受您无法控制浏览器行为的每个方面。不同浏览器的用户对行为有不同的期望，如果您开始改变用户的期望，那么您就走错了路。

- easwee

---

相当确定规范没有说li不能有活动状态。 - BoltClock

看起来图标挡住了菜单，导致无法点击。有什么解决方法吗？ - UrBestFriend

嗯，结果一样。其他浏览器在激活时将“li”的符号变成粉色，IE则没有。看起来又是另一个浏览器的差异。天哪。 - BoltClock

@aeswee 谢谢你，这个问题有没有解决方法可以在IE中使用？似乎这个问题只出现在IE中。 - UrBestFriend

我认为在用户按住鼠标左键时更改元素的颜色，或类似的操作（针对非链接的元素），不会破坏任何值得保留的用户期望。所有其他浏览器制造商似乎都同意我的看法。我无法统计出有多少次我遇到了所有浏览器都可以接受（在大多数人的意见中）但IE例外的事情。我一直希望这种情况最终会改变，但20年前是真的，今天仍然如此。我的答案是：不要屈服；使用JavaScript来实现。 - Shavais