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

Posted 2023-02-21

【中文标题】:active css 选择器不适用于 IE8 和 IE9

【英文标题】：:active css selector not working for IE8 and IE9

【发布时间】：2011-08-01 10:25:28

【问题描述】：

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

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

【问题讨论】：

呃，你指的是哪个:active 样式？它们适用于我的两个版本。

@BoltClock：菜单活动样式。按下时它应该更暗 - 这与悬停效果相比有所区别。

我现在看到了。一定是错过了。

@BoltClock：是的，困扰我的是选择器的顺序是正确的——聚焦、悬停然后激活。但由于某种原因，它不适用于 Internet Explorer。

【参考方案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 伪选择器的失败。垃圾。 =(

【讨论】：

span:active + span 选择器在 IE10 中也不起作用。请注意，简单的span:active 有效。

谢谢，@ruvim。已更新回复以反映您对 IE10 中的错误的确认。

【参考方案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 相同 例子。 （拖动后按回车键 你的鼠标离开链接，你会 查看更多行为差异。）

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

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

【讨论】：

很确定规范没有说li 不能有活动状态。

据我了解，如果没有与元素的活动交互，它不会触发 :active 状态 - 我会为此做一个测试用例。

图标似乎阻止了菜单的可点击。有没有解决方法？

嗯，同样的结果。其他浏览器在激活时会将li 的项目符号变为粉红色，而 IE 则不会。看起来又是一个浏览器差异。天哪。

@aeswee 对此表示感谢，是否可以在 IE 中解决此问题？看来这个问题只针对IE