我早些时候通过手机问过这个问题，但它变得非常复杂和困惑，所以我决定在找到一台可用的 PC 后重新开始。请注意，由于该元素的 secret 性质也处于离线状态，因此我无法提供完整的原始代码或图像。无论如何，下面的基本版本包含相同的问题，所以我很确定能够解决这个示例代码中的问题将足以让我解决实际应用程序中的任何其他问题。
我有以下代码:https://jsfiddle.net/mssdjrzk/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
当光标悬停在按钮上时，会触发默认的基于浏览器的行为。在 IE 11 的情况下，该按钮突出显示。
接下来，我为 a:hover 添加额外的 CSS : https://jsfiddle.net/yLrznyss/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
a:hover {
color: red;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
现在，当我将光标悬停在按钮上时，行为变得一团糟 - 行为不会呈现，尽管其他事件如 onclick正常呈现。我已经做了很多故障排除并尝试解决问题，但都没有成功，但这是我的发现:
- 违规元素是
:hover.它所附加的元素/类/id 无关紧要，它在样式表中的存在就足够了。连a:hover {}不包含样式也会导致问题，span:hover {}也是如此。当没有<span>元素甚至存在于 HTML 中。 - 我在 Chrome 上试过了，但问题不存在，因为 Chrome 按钮的默认悬停行为呈现方式不同。 因此这是一个特定于浏览器的问题。
- 问题只存在于包含图像的按钮中，而不是包含文本的按钮、空按钮或不在任何内容中的独立图像。
我的猜测是 :hover 的存在样式表中的 CSS，即使它是空的，也会导致 IE 呈现结果网页的方式及其行为出现问题。
如何防止按钮和/或其内部图像受到影响，从而恢复到默认的 IE 按钮悬停行为？我可以更改任何内容，只要在超链接是在不影响按钮的情况下实现的。
使用此代码的完整应用程序将在 Windows 10 上使用 IE11，而不是任何其他浏览器。 可以接受使用 HTML、CSS 或 JavaScript 的解决方案，但没有外部库可用于我的元素。
最佳答案
也许我遗漏了什么，但我没有在按钮内看到任何 anchor 链接。我使用了这段代码:
button:hover {
background: red;
}
并且能够得到你想要的悬停效果
关于javascript - :hover CSS style affecting browser-based behaviour of buttons containing image，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40012882/