Earlier I attempted to ask this question from my phone, but it ended up being overly convoluted and confusing. Therefore, I have decided to start fresh after locating a working PC. Unfortunately, due to the sensitive nature of the project, I am unable to provide the full original code or images as they are offline. However, the simplified version below still presents the same issue that needs troubleshooting.
Below is the snippet of code in question: 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>
Upon hovering over the button, a default browser behavior triggers. In Internet Explorer 11, the button becomes highlighted.
Subsequently, I introduced additional CSS for a:hover: 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>
When I hover over the button now, the behavior seems to be disrupted - it does not render correctly. Other events such as onclick work fine. Despite numerous attempts to troubleshoot and find a solution, my efforts have been unsuccessful. Here are some observations:
- The element causing issues seems to be
:hover. Whether applied to an element, class, or ID, its presence in the stylesheet causes problems. Even an emptya:hover{}will create issues, similar tospan:hover{}when no<span>elements actually exist in the HTML. - This problem is specific to IE and does not occur in Chrome, where default hover behaviors for buttons are handled differently. Therefore, this is a browser-specific issue.
- The problem only arises with buttons containing images, not those with text, empty buttons, or isolated images not enclosed within other elements.
My assumption is that the presence of :hover in the CSS stylesheet, even if empty, interferes with how IE renders the page and its behavior.
How can I prevent the button and/or its internal image from being affected, thus restoring the default IE button hover behavior? Any modifications are welcome as long as the desired hyperlink hover style is maintained without impacting the buttons.
The application utilizing this code will run on IE11 Windows 10 and solely supports solutions using HTML, CSS, or JavaScript without any external libraries available.