:active 伪类和div 元素
首先，我很确定 div 元素一开始就不应该有激活状态。
如果我们通读Selectors Level 3 W3C Recommendation 的user action pseudo-classes :hover, :active, and :focus section，我们会发现：
:active 伪类在用户激活元素时应用。例如，在用户按下鼠标按钮并释放它的时间之间。在具有多个鼠标按钮的系统上，:active 仅适用于主要或主要激活按钮（通常是“左”鼠标按钮）及其任何别名。
现在如果我们转到HTML5 W3C Editor's Draft 的Interactive Content 部分，我们会发现：
HTML 中的某些元素具有激活行为，这意味着用户可以激活它们。
用户代理应该允许用户手动触发具有激活行为的元素，例如使用键盘或语音输入，或者通过鼠标点击。当用户以非点击方式触发具有已定义激活行为的元素时，交互事件的默认操作必须是在该元素上运行合成点击激活步骤。
我提到 HTML5 Editor's Draft 而不是 HTML401 Recommendation，因为 HTML401 文档没有详细介绍激活状态或用户交互。然而，它确实提到了对 a 元素等元素的激活，但在定义 div 元素时没有提及任何相关内容。
div element没有在 HTML5 建议中定义了“激活状态”。它没有 Interactive Content 类别（与 the a element 不同）并且没有声明可以对其应用活动状态。
一种解决方法
如上所述，div 元素不应接受:active 状态。出于这个原因，我将修改 HTML 以使用一个元素。为此，我使用了a 元素：
<a href="javascript: void(0)">
<img />
</a>
现在仅此一项并不能解决 IE 问题。如果您看到this JSFiddle example，当单击img 元素时，a 容器不会处于活动状态。那么我们能做些什么来解决这个问题呢？除了使用:hover:active，我还将使用:hover:focus：
a:hover:active,
a:hover:focus {
outline: 0; /* Reset the default anchor tag focus style. */
background: #f00;
}
这为我们在 IE 和所有其他浏览器上提供了类似的功能，如 JSFiddle demo 所示。
两个（可能不受欢迎的）副作用
-
这种方法的问题是元素将保持其焦点状态，您现在可以通过使用键盘的 tab 键访问元素来实现此效果。每当您将鼠标悬停在处于焦点状态的元素上时，其样式都会发生变化。然而，这是否是不受欢迎的副作用不是由我来决定的。
-
您的元素现在是一个链接。需要href 属性才能使元素首先获得焦点。
额外的样式
由于我们现在使用的是a 元素而不是div 元素，因此我们需要重置任何将您的元素区分为链接的浏览器默认样式。为此，我们可以简单地：
a {
color: #000; /* Reset the color to black. */
cursor: default; /* Reset the cursor to default. */
text-decoration: none; /* Remove the underline. */
}
a img {
border: none; /* Remove border from image. */
}
Final JSFiddle demo.