:活跃的CSSselect器不适用于IE8和IE9

这是我的网站 。 这是我所经历和解决的一系列跨浏览器差异的最后一个问题。

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

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

但是,您正在将您的:activeselect器应用到您的<li>元素, 元素不能处于活动状态,因为它从未真正被激活 – 只能徘徊。 您应该将:active状态应用于<a> < – 对于IE 6为True。

更新:这是jsFiddle的一个testing样例,你可以看到它在<a>元素上工作正常,但在<li>

有趣的信息,我在这里find

:当用户select链接时,激活的伪类应用。

CSS1在这种行为上有点模棱两可:“一个”主动“链接是当前被读者选中(例如通过鼠标按下)的链接。 而且,在CSS1中,:active与:link和:visited是相互排斥的。 (没有:hover伪类。)

CSS2改变了一些东西,这样规则:active可以同时应用:visited或者link。 而且行为被解释得更好一些:“:激活的伪类应用于用户激活一个元素,例如,在用户按下鼠标button并释放它的时间之间。

国际海事组织,FF等人遵守CSS2比IE更好。 但是由于一个链接应该加载一个新的页面,IE浏览器可以合法地说,链接仍然是“活动”,而新的页面正在加载,这是发生了什么事情。

您可以通过单击链接在FF中看到类似的反直觉行为,但按住鼠标button的同时将鼠标移出链接。 链接没有被激活(一个新的页面没有被加载),但链接保持在:活动状态。 另一方面,Chrome和Opera停用链接,但在不同的时间; Chrome只要鼠标离开链接区域,Opera就不会释放鼠标button。 IE在这个例子中的行为与FF相同。 (将鼠标从链接中拖出后点击进入,您将看到更多的行为差异。)

由于规范中的含糊不清,我不会把这些差异称为“错误”。

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

为了相关性,为了避免任何其他人寻找解决scheme的麻烦,我还在IE <= 10中发现了一个“bug”,你不能将样式应用到:active子,例如:

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

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

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

在大多数情况下,这并不是一个完美的解决scheme,因为锚点内的任何文本都需要比图像更高的Z-index值,这意味着图像只会根据点击图像本身来改变它的位置(给图像:积极的状态)……这留下了一个次要的束缚,但是一个无关紧要的束缚(只有一个CSS解决scheme)。

因此,尽pipe这不是一个解决scheme,但是对于其他人来说,关于IE中活动的伪select器的崩溃,更多的是“警告”。 垃圾。 =(