：活跃的CSS选择器不适用于IE8和IE9

Question

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

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

Answer 1

的：有源伪类适用而 元件被由 用户激活。例如，在时间 之间，用户按下鼠标按钮并且 释放它。见W3 documentation。

但是你申请你的:active选择您<li>元素， ，因为它从来没有真正被激活，不能有一个活跃的状态 - 仅徘徊。您应该应用 :active状态 <a> < - 真正的IE 6

UPDATE：这里是在jsFiddle测试样品，你可以看到它的工作原理确定<a>元素上，而在<li>

有趣的信息不正常我发现here

的：当 链路正在由用户选择有源伪类适用。

CSS1有点模糊的有关此 行为：“‘有效’链接是一个 当前正在选择（例如 由鼠标按钮按压）由 读者”。另外，在CSS1中，：active是 互斥排列：link和 ：visited。 （也没有：悬停 伪类。）

CSS2改变了一些事情，以便为 规则：活动可同时适用， ：访问或：链接。和行为 解释好一点：“的 ：。活性伪类适用而一个 元件正被 用户激活例如， 用户按下鼠标按钮， 释放它的时间之间”

IMO，FF等人比IE更符合CSS2更好 。但是因为链接应该是 来加载一个新页面，所以IE可能会 合法地说链接仍然是 “active”，而新页面是 加载，这就是发生了什么情况。

您可以通过 看到FF类似 反直觉的行为，点击该链接，但移动你的鼠标 关闭链接的同时保持 的鼠标按键。链接不是 激活（不加载新页面）， 但链接仍处于：活动 状态。另一方面，Chrome和 Opera取消激活链接，但在 不同的时间; Chrome只要 鼠标离开链接区域，Opera就不会 ，直到释放鼠标按钮。在此 示例中，IE 的行为与FF相同。 （点击拖动 鼠标关闭链接后进入，你会看到 行为更差。）

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

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

Answer 2

贪图关联的，并保存任何人寻找解决的麻烦，我还发现了一个“错误”在IE < = 10，在那里你不能将样式应用于：好动的孩子，如;

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

上面不会改变图像的位置在IE < = 10，在这种情况下则需要适用：有源子元件本身上;

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

在大多数情况下是不作为锚内的任何文本的完美解决方案需要有比图像较高的Z-index值，这意味着图像将只更改它基于点击图像位置本身（给图像：活动状态）......这使我处于一个次要的束缚中，但是一个无关紧要的束缚（仅用于css解决方案）。

所以，虽然这不是一个修复，但它更像是对其他人的“警告”，关于IE中活动伪选择器的垮台。垃圾。 =（