Question

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

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

Answer 1

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

但是您正在将:active选择器应用于您的<li>元素~~，因为它永远不会被激活而无法处于活动状态 - 只会悬停。您应该将:active状态应用于<a>~~ ＆lt; - 适用于IE 6。

更新：这是jsFiddle的测试示例，因为您可以看到它在<a>元素上正常工作但在<li>

上无效

有趣的信息我发现here

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

CSS1对此有点模棱两可   行为：“'活跃'链接是一个   目前正在选择（例如   按下鼠标按钮）   读者。“另外，在CSS1中，：active是   相互排斥：链接和   ：参观。（而且没有：悬停   伪类。）

CSS2改变了事情以便规则   ：active可以同时申请   ：访问过或：链接。和行为   被解释得好一点：“   ：活动伪类适用于   元素正被激活   用户。例如，在时间之间   用户按下鼠标按钮   释放它。“

IMO，FF等人更好地遵守CSS2   比IE。但是因为有一个链接   加载新页面，IE可以   合法地说这个链接仍然存在   新页面为“活动”   加载，这就是发生的事情。

你可以看到类似的   FF中的反直觉行为   点击链接，但移动你的   鼠标离开链接，同时按住   鼠标按钮向下。链接不是   已激活（未加载新页面），   但链接仍保留在：active   州。另一方面，Chrome和   Opera取消激活链接，但是在   不同时期; Chrome尽快上线   鼠标离开了链接区域，Opera没有   直到鼠标按钮被释放。 IE   在这方面与FF的行为相同   例。（拖动后点击进入   你的鼠标离开链接，你会   看到更多的行为差异。）

我不会打电话给任何这些   差异“错误”，因为   规范中含糊不清。

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

Answer 2

仅仅为了相关性并且为了节省其他人搜索解决方案的麻烦，我还在IE＆lt; = 10中找到了一个“bug”，你不能将样式应用于：active child，例如; < / p>

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

上面的内容不会改变IE中的图像位置＆lt; = 10，在这种情况下你需要在子元素本身上应用：active;

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

在大多数情况下，这不是一个完美的解决方案，因为锚内的任何文本都需要具有比图像更高的z-index值，这意味着图像将仅基于单击图像本身来改变它的位置（给出想象一下：活跃的状态）......这让我陷入了一种轻微的束缚，但却是一种不受约束的束缚（仅限于css解决方案）。

因此，虽然这不是一个修复，但对于其他人来说，它更多的是“警告”关于IE中的活动伪选择器。垃圾。 =（

：活动的css选择器不适用于IE8和IE9

2 个答案: