IE11兼容模式下button:hover失效问题及解决方案咨询

嘿，我之前也踩过IE兼容模式的坑，给你几个实用的解决思路，应该能搞定这个问题：

1. 强制IE使用标准文档模式 #

IE兼容模式经常会自动切换到旧版IE（比如IE8）的渲染模式，而这些旧版本对<button>的:hover支持有缺陷。你可以在页面的<head>里添加以下meta标签，强制浏览器用IE11的标准模式渲染：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这一步是基础，先确保浏览器没有降级到更老的文档模式。

2. 扩展伪类覆盖更多触发场景 #

IE兼容模式下，有时候:hover的识别不够灵敏，你可以把:focus和:active伪类也加上，让样式在更多交互场景下生效，同时也能兼容旧版IE的行为：

.genericBtn {
  background-color: #FFFFFF;
  color: #000000;
}
.genericBtn:hover, 
.genericBtn:focus, 
.genericBtn:active {
  background-color: grey;
  color: #FFFFFF;
}

3. 调整Button的显示属性 #

旧版IE对行内元素的:hover支持不佳，你可以把button设置为inline-block或者block，让浏览器更好地识别它的交互区域：

.genericBtn {
  display: inline-block;
  background-color: #FFFFFF;
  color: #000000;
}

另外，检查一下有没有其他CSS规则用!important覆盖了你的hover样式，这也是常见的冲突原因。

4. 用JavaScript辅助触发（备选方案） #

如果以上CSS方案都不生效，可以用JS手动监听鼠标事件来切换样式，绕过IE的伪类支持问题：
首先修改CSS，新增一个自定义类：

.genericBtn {
  background-color: #FFFFFF;
  color: #000000;
}
.genericBtn.hover-active {
  background-color: grey;
  color: #FFFFFF;
}

然后添加JS事件监听：

const btn = document.querySelector('.genericBtn');
btn.addEventListener('mouseover', () => btn.classList.add('hover-active'));
btn.addEventListener('mouseout', () => btn.classList.remove('hover-active'));

为什么会出现这个问题？ #

IE11的兼容模式本质是模拟旧版IE（比如IE8及以下）的渲染逻辑，而这些旧版本对<button>元素内部包含子元素（比如你的<span>）时，:hover伪类的识别存在bug，无法正确触发样式变化。

内容的提问来源于stack exchange，提问作者Arshad Rehmani