:active css 选择器不适用于 IE8 和 IE9 [英] :active css selector not working for IE8 and IE9

问题描述

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

Here's my site. This is the last problem of a series of cross-browser discrepancies I've experienced and solved thanks to the community.

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

Basically, in Internet Explorer 8 and Internet Explorer 9 the :active styles are not applied to the menu. It should turn darker when pressed. Please let me know why and how to fix. Thanks in advance.

推荐答案

:active 伪类适用于一个元素被激活用户.例如，在时间之间用户按下鼠标按钮并释放它.请参阅 W3 文档.

但是您正在将 :active 选择器应用于您的 <li> 元素，它不能具有活动状态，因为它从未真正被激活 - 只有徘徊.您应该将 :active 状态应用于 <a> <- 适用于 IE 6.

But you are applying your :active selector to your <li> element, which cannot have an active state since it never really gets activated - only hovered. You should apply :active state to <a> <- True for IE 6.

更新:这是您在 jsFiddle 上的测试样本可以看到它在 <a> 元素上工作正常，但在 <li>

UPDATE: Here's a test sample at jsFiddle as you can see it works ok on <a> element but not ok on <li>

我在这里

:active 伪类适用于用户正在选择一个链接.

The :active pseudo-class applies while a link is being selected by the user.

CSS1 在这方面有点模棱两可行为:一个‘活动’链接是一个当前正在选择的(例如通过鼠标按钮按下)由阅读器."此外，在 CSS1 中， :active 是从 :link 和互斥: 访问过.(而且没有 :hover伪类.)

CSS1 was a little ambiguous on this behavior: "An 'active' link is one that is currently being selected (e.g. by a mouse button press) by the reader." Also, in CSS1, :active was mutually exclusive from :link and :visited. (And there was no :hover pseudo-class.)

CSS2 改变了规则:active 可以同时申请:visited 或 :link.和行为解释得更好一点::active 伪类适用，而元素被激活用户.例如，在时间之间用户按下鼠标按钮并释放它."

CSS2 changed things so that rules for :active can apply at the same time as :visited or :link. And the behavior was explained a little better: "The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it."

IMO、FF 等更符合 CSS2比IE.但是由于应该有一个链接加载一个新页面，IE 可以合法地说链接仍然存在活动"，而新页面是加载，这就是发生的事情.

IMO, FF et al comply with CSS2 better than IE. But since a link is supposed to load a new page, IE could legitimately say the link is still "active" while the new page is loading, which is what happens.

你可以看到类似的FF中的反直觉行为点击链接，但移动你的按住鼠标离开链接鼠标按钮向下.链接不是已激活(未加载新页面)，但链接仍保留在 :active状态.另一方面，Chrome 和Opera 取消激活链接，但在不同时期；Chrome 尽快鼠标离开链接区域，Opera 没有直到松开鼠标按钮.IE在此行为与 FF 相同例子.(拖动后按回车键你的鼠标离开链接，你会查看更多行为差异.)

You can see a similar counter-intuitive behavior in FF by clicking the link, but moving your mouse off of the link while holding the mouse-button down. The link is not activated (a new page is not loaded), but the link remains in the :active state. On the other hand, Chrome and Opera de-activate the link, but at different times; Chrome as soon as the mouse leaves the link area, Opera not till the mouse button is released. IE behaves the same as FF in this example. (Hit enter after dragging your mouse off the link, and you will see more differences in behavior.)

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

I would not call any of these differences "bugs", because of ambiguities in the spec.

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

The only work-around I can offer is to accept that you can't control every aspect of browser behavior. Users of different browsers have differing expectations of behavior, and if you start messing with user expectation, you're on the wrong path.

这篇关于:active css 选择器不适用于 IE8 和 IE9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！