CSS :悬停打破了 IE11 中的按钮样式

Question

IE11 中按钮的默认样式包括悬停效果 - 按钮在悬停时以青色突出显示（具体效果可能取决于主题）。但是，使用 :hover 伪 class 添加看似无关的 CSS 规则会破坏按钮上的悬停突出显示，并且它们在单击时也会表现出一些奇怪的行为（悬停突出显示似乎是应用并在单击按钮时卡住）。

我在 JSFiddle 中有一个简单的测试用例，只有以下 HTML，它按预期工作：

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

将鼠标悬停在 "Prev" 按钮上时看起来像这样：

如果我添加以下 CSS 规则（无论使用什么 class 名称，或者它是否为空或实际上做了什么都没有关系），按钮不会突出显示悬停了，但是如果我点击一个按钮，悬停效果似乎会卡住（即点击后按钮没有悬停时仍然突出显示）：

.AnythingYouWant:hover {}

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

我是不是对 CSS 做了一些无效的事情导致了这个问题，或者这只是一个奇怪的 IE11 错误？有没有什么办法解决这一问题？ Firefox 和 Chrome 似乎不受 :hover CSS 规则的困扰。

Answer 1

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

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

我不确定是否有更好的 "do nothing" CSS 规则可以使用。这是 fiddle 显示 "fix" 的实际效果：

CSS :hover breaks button styling in IE11