：活动css选择器不工作在IE8和IE9 [英] :active css selector not working for IE8 and IE9

问题描述

以下是我的网站。这是我经历和解决的一系列跨浏览器差异的最后一个问题，感谢社区。

基本上，在Internet Explorer 8和Internet Explorer 9 ：active 样式不应用于菜单。按下时应该变暗。请让我知道为什么和如何解决。先感谢。

解决方案

活动伪类适用于
元素正在被
用户激活。例如，在时间
之间，用户按鼠标按钮，
释放它。请参阅W3 文档。

但您正在将：active 选择器应用于< li& / code>元素，不能有活动状态，因为它从来没有真正被激活 - 只有hover。您应该将：active 状态应用于< a> / p>



UPDATE：这是 jsFiddle ，你可以看到它在< a> 元素上工作正常，但在< li> / code>

我发现的有趣信息这里

活动伪类适用于用户选择
a链接时。

CSS1在这个
行为上有点模棱两可：一个'活动'链接是一个正在选择的
（例如
鼠标按钮按下）by
reader。另外，在CSS1中：：active是
互斥的：link和
：visited。 （还有没有：悬停
伪类。）

CSS2改变了事情，使
：active的规则可以同时应用as
：visited or：link。并且行为
被更好地解释：
：active伪类应用，而
元素由
用户激活，例如，在时间
用户按下鼠标按钮，
释放它。

IMO，FF等符合CSS2比$。但由于一个链接应该是
加载一个新的页面，IE可以
合法地说链接仍然是
活动，而新页面是
加载，这是发生。

您可以通过单击链接在
中看到类似的
反直觉行为，但是将
鼠标移开链接同时按住
的鼠标按钮。链接不是
激活（新页面未加载），
，但链接保持在：active
状态。另一方面，Chrome和
Opera取消激活链接，但在
不同的时间; Chrome一旦
鼠标离开链接区域，Opera就不会
，直到鼠标按钮被释放。 IE
在此
示例中的行为与FF相同。 （在拖动
后点击enter，你的鼠标离开链接，你将
看到更多的行为差异。）

我不会调用任何这些
差异bugs，因为
在规范中的含糊。

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

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.

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.

解决方案

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. See W3 documentation.

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.

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

Interesting info I found here

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

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 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 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.

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.

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