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

Question

这是我的网站.这是我所经历和解决的一系列跨浏览器差异的最后一个问题,这要归功于社区.

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

Answer 1

:在用户激活元素时应用:active伪类.例如,在用户按下鼠标按钮并释放它的时间之间.请参阅W3 文档.

但是你将你的:active选择器应用于你的<li>元素,它不能具有活动状态,因为它永远不会被激活 - 只是悬停.:active<a>对于IE 6,您应该将状态应用于 < - True.

更新:这是jsFiddle的一个测试样本,因为你可以看到它在<a>元素上工作正常但不是正确的<li>

我在这里找到有趣的信息

:在用户选择链接时应用:active伪类.

CSS1对这种行为有点模棱两可:"一个'活动'链接是当前被读者选择的链接(例如通过鼠标按下按钮)." 此外,在CSS1中,:active与:link和:visited互斥.(并且没有:悬停伪类.)

CSS2改变了一些东西,以便:active的规则可以同时应用于:visited或:link.并且行为得到了更好的解释:":当用户激活元素时,应用了活动伪类.例如,在用户按下鼠标按钮并释放它的时间之间."

IMO,FF等人比IE更好地遵守CSS2.但是由于链接应该加载一个新页面,IE可以合法地说链接在加载新页面时仍然是"活动的",这就是发生的情况.

您可以通过单击链接在FF中看到类似的反直觉行为,但在按住鼠标按钮的同时将鼠标移离链接.链接未激活(未加载新页面),但链接仍处于:活动状态.另一方面,Chrome和Opera取消激活链接,但在不同的时间; 鼠标离开链接区域时立即使用Chrome,直到鼠标按钮被释放为止.在此示例中,IE的行为与FF相同.(将鼠标拖离链接后按Enter键,您将看到更多行为差异.)

由于规范含糊不清,我不会将这些差异称为"错误".

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

Answer 2

只是为了相关性并且为了节省其他人搜索解决方案的麻烦,我还在IE <= 10中找到了一个"bug",在那里你不能将样式应用于:active child,例如;

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

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

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

在大多数情况下,这不是一个完美的解决方案,因为锚内的任何文本都需要具有比图像更高的z-index值,这意味着图像将仅基于单击图像本身来改变它的位置(给出图像:活跃的状态)...这让我处于次要的绑定中,但是一个非常小的绑定(仅限于css解决方案).

因此,尽管这不是一个修复,但对于其他人来说,它更像是一个警告"关于IE中的活动伪选择器.垃圾.=(