css active 在 IE9 中不做鼠标释放答案

【问题标题】：css active doesn't do mouse release in IE9css active 在 IE9 中不做鼠标释放
【发布时间】：2012-05-26 01:21:29
【问题描述】：

当我在 IE9 中按下鼠标时，图像保持不变。我必须单击页面的其他部分才能将其备份。 Firefox 和 Chrome 工作正常（他们放回原始图像）。有什么想法吗？

如果我使用 IE9，它甚至可以在这里工作 http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

但如果我在桌面上创建一个 html 并在 IE9 中打开它，则不会。

<html>
<head>
<style type="text/css">
  #button{background:url("http://www.webstuffshare.com/wp-content/uploads/2010/03/button3.jpg") no-repeat 0 0;display:block;width:201px;height:67px;}
  #button:hover{background-position:0px -67px;}
  #button:active{background-position:0px -134px;}
  #button span{position:absolute;top:-99999999em;}
</style>    
</head>
<body>
  <a id="button" href="#"><span>this is foo</span></a>
</body>
</html>

【问题讨论】：

您必须单击对象才能移除其活动状态。
我看到的行为是，如果我在释放鼠标时仍然“超过”按钮，它可以工作，但是，在所有三种浏览器（IE9、FF12、Chrome）中，如果我按下，按住鼠标按钮并离开按钮，它保持“按下”状态。 Chrome在我抬起后再次移动鼠标后就纠正了它，在这种情况下，Firefox和IE9似乎需要再次点击。

标签： css internet-explorer-9

【解决方案1】：

你最好使用 js 事件作为 :active 可能会表现得不直观（类似问题；:active css selector not working for IE8 and IE9）

阻止你想要的行为的一种方法是；

<a id="button" href="#" onclick="this.blur();" onmouseout="this.blur();"><span>this is foo</span></a>

【讨论】：