CSS :hover 打破 IE11 中的按钮样式答案

【问题标题】：CSS :hover breaks button styling in IE11CSS :hover 打破 IE11 中的按钮样式
【发布时间】：2016-04-12 21:33:14
【问题描述】：

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

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

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

将鼠标悬停在“上一个”按钮上时如下所示：

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

.AnythingYouWant:hover {}

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

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

【问题讨论】：

【解决方案1】：

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

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

我不确定是否有更好的“什么都不做”CSS 规则可以使用。这是一个显示“修复”的小提琴：

【讨论】：