:active css 选择器不适用于 IE8 和 IE9

Question

这是我的site。这是我在社区遇到并解决的一系列跨浏览器差异中的最后一个问题。

基本上，在 Internet Explorer 8 和 Internet Explorer 9 中，:active 样式不会应用于菜单。按下时它应该变暗。请让我知道为什么以及如何解决。提前致谢。

Answer 1

只是为了相关性并为其他人省去寻找解决方案的麻烦，我还在 IE

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

上述内容不会改变图像在 IE

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

在大多数情况下，这并不是一个完美的解决方案，因为锚点内的任何文本都需要具有比图像更高的 z-index 值，这意味着图像只会根据单击图像本身来改变其位置（给出想象 :active 状态）...这让我处于一个小绑定中，但仍然是一个绑定（对于仅 css 的解决方案）。

因此，虽然这不是一个修复，但它更像是对其他人的“警告”，即 IE 中 :active 伪选择器的失败。垃圾。 =(

Answer 2

:active 伪类适用于 一个元素被激活 用户。例如，在时间之间 用户按下鼠标按钮并 释放它。见 W3 documentation。

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

更新：这是jsFiddle 的测试样本，您可以看到它在<a> 元素上运行正常，但在<li> 上运行不正常

我发现here的有趣信息

:active 伪类适用于 用户正在选择一个链接。

CSS1 在这方面有点模棱两可 行为：“一个‘活动’链接是一个 当前正在选择的（例如 通过鼠标按钮按下）由 阅读器。”此外，在 CSS1 中， :active 是 从 :link 和互斥 : 访问过。 （而且没有 :hover 伪类。）

CSS2 改变了规则 :active 可以同时申请 :visited 或 :link。和行为 解释得更好一点：“ :active 伪类适用，而 元素被激活 用户。例如，在时间之间 用户按下鼠标按钮并 释放它。”

IMO、FF 等更符合 CSS2 比IE。但是由于应该有一个链接 加载一个新页面，IE 可以 合法地说链接仍然存在 “活动”，而新页面是 加载，这就是发生的事情。

你可以看到类似的 FF中的反直觉行为 点击链接，但移动你的 按住鼠标离开链接 鼠标按钮向下。链接不是 已激活（未加载新页面）， 但链接仍保留在 :active 状态。另一方面，Chrome 和 Opera 取消激活链接，但在 不同时期； Chrome 尽快 鼠标离开链接区域，Opera 没有 直到松开鼠标按钮。 IE 在此行为与 FF 相同 例子。 （拖动后按回车键 你的鼠标离开链接，你会 查看更多行为差异。）

我不会调用任何这些 差异“错误”，因为 规范中的歧义。

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