CSS :hover 在 IE11 中破坏了按钮样式

Question

IE11默认按钮样式包含悬停效果-悬停时按钮会以青色（确切的效果可能取决于主题）突出显示。然而，使用`: hover`伪类添加一个看似无关的CSS规则会破坏按钮的悬停高亮，并且在单击按钮时它们还会表现出一些奇怪的行为（单击按钮时，悬停高亮似乎被应用并卡住了）。我在JSFiddle中有一个简单的测试用例，只有以下HTML，可以按预期工作：

<div>
    <button>Prev</button>
    <button>Next</button>
</div>

当鼠标悬停在“Prev”按钮上时，它会呈现如下效果：

https://jsfiddle.net/qtsfokmy/

如果我添加以下CSS规则（无论使用什么类名，或者它是否为空或实际执行某些操作），按钮将不再在悬停时突出显示，但如果我单击按钮，则悬停效果似乎会被卡住（即在单击后未悬停时按钮仍处于突出显示状态）：

.AnythingYouWant:hover {}

我的电脑详细信息是：Windows 7 64位SP1，IE11 11.0.9600.18230，Aero主题。

我是否在CSS方面做错了什么导致这种情况，还是这只是一个奇怪的IE11错误？有没有办法修复它？Firefox和Chrome似乎没有受到:hover CSS规则的影响。 https://jsfiddle.net/vwhurLy4/

- Mark

---

在IE11中对我有效：https://jsfiddle.net/vwhurLy4/1/ 你能澄清一下你遇到的问题，并分享实际使用的代码吗？ - TylerH

是的，那肯定是个漏洞。我会提交它。 - Chris W.

可以确认。我在Windows 7上的IE 11中遇到了这个问题，但在Windows 10上的IE 11中没有出现。 - Joseph Marikle

@PaulAbbott 感谢您澄清这只影响了 Aero 主题 - 我没有想到尝试其他主题。 - Mark

@TylerH 这是真的，他们有新东西即将推出。 - Chris W.

Answer 1

我想知道是否有一种方法可以重新应用默认的按钮悬停样式，但似乎你甚至不需要走得那么远。任何非空的button:hover规则似乎都可以修复默认样式（空规则不能解决这个问题），例如这个规则实际上并没有改变任何东西，但是在IE11中恢复了默认的悬停效果：

.AnythingYouWant:hover {}
button:hover {
  font-weight: normal;
}

我不确定是否有更好的“什么都不做”的CSS规则可用。这里有一个演示“修复”效果的fiddle：

https://jsfiddle.net/xkf5fbLd/

- Mark

---

没错，在我的Win7 Ultimate SP1 64位系统上，IE v11.0.9600.18204版本可以正常运行，并且开启了Aero效果。 - TylerH