html – CSS：hover打破了IE11中的按钮样式

2023年5月30日 370次阅读

IE11中按钮的默认样式包括悬停效果 – 悬停时按钮以青色突出显示(确切的效果可能与主题有关).但是,使用：hover伪类添加看似无关的CSS规则会破坏按钮上的悬停突出显示,并且在单击时它们也会显示一些奇怪的行为(单击按钮时似乎应用了悬停突出显示并卡住).

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

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

将鼠标悬停在“上一个”按钮上时看起来像这样：

《html – CSS：hover打破了IE11中的按钮样式》

https://jsfiddle.net/qtsfokmy/

如果我添加以下CSS规则(使用什么类名称无关紧要,或者它是空的还是实际上做了什么),按钮在悬停时不会突出显示,但如果我单击按钮,则悬停效果似乎卡住(即点击后没有悬停时按钮仍然突出显示)：

.AnythingYouWant:hover {}

https://jsfiddle.net/vwhurLy4/

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

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

最佳答案 我想知道是否有办法将默认悬停样式重新应用于按钮,但似乎你甚至不需要那么远.任何非空按钮：悬停规则似乎修复了默认样式(空规则不能解决问题),例如此规则实际上不会更改任何内容,但会恢复IE11中的默认悬停效果：

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

我不确定是否有更好的“无所事事”CSS规则可供使用.这是一个显示“修复”的小提琴：

https://jsfiddle.net/xkf5fbLd/

点赞