IE11 shifts button text by some px on :hover and :active

Question

Take the code snippet below.

The button in the example should become black on mousedown (:active) - which works pretty fine - but IE11 additionally shifts the button text by some pixels to the bottom right if the mouse is on the button (:hover). You can see this by pressing the button and moving the mouse away from the button while holding down the mouse - the button stays active but as soon as the cursor leaves the button, the text is shifted back:

All other browsers (even Edge) work as desired.

As in IE11's dev tools only the :hover pseudo class can be applied, I have no idea where this shift comes from. I already tried to specify padding and margin for the button but without success.

input[type="button"] {
  width: 200px;
  height: 3rem;
  
  background: #10275e;
  border: 1px solid white;
  color: white;
  
  font-size: 1.2rem;
}
  
input[type="button"]:hover {
  color: #10275e;
  background: white;
}
  
input[type="button"]:active {
  color: white;
  background: black;
  padding: 0;
}

<body style="background:#10275e">
<input type="button" value="Press me" />
</body>

Can anybody tell how to make IE11 not shift the button text on :active and :hover?

This has nothing to do with flex style, so why should it be a dupe?

Firefox user here ! The problem is [present](https://up.l3m.in/file/1562759475-firefox.webm) on firefox for linux too. — sodimel, Jul 10 '19 at 11:51
@sodimel I updated the snippet and it should work in FF now as well. I added `padding: 0` to the `:active` class' style. Luckily in FF one can trigger both pseudo classes... — dpr, Jul 10 '19 at 11:55
it only happens onclick/active, to show it gets the focus, on hover nothing happens — G-cyr running IE11, Jul 10 '19 at 11:56
@G-cyrrunningIE11 what does this mean? And how can I make IE11 not shift the text? — dpr, Jul 10 '19 at 11:59
i would not change this for a matter of accessibility. let me know it is a button, it reacts and i can click it. — G-cyr running IE11, Jul 10 '19 at 12:04
Doesn’t seem to be an unknown problem, https://www.google.com/search?q=internet%20explorer%20button%20text%20moves%20hover%20active%20site%3Astackoverflow.com - check if anything contained in those helps maybe. It is probably due do a rule that combines `:hover`, and `:active` or `:focus` states. — misorude, Jul 10 '19 at 12:16

sodimel · Accepted Answer · 2019-07-10T13:07:51.157

1

Found a solution on another thread (from this question) !

The solution needs some changes on your code (the input need to be a button element), because we want to use a span inside the button.

button {
  width: 200px;
  height: 3rem;
  
  background: #10275e;
  border: 1px solid white;
  color: white;
  
  font-size: 1.2rem;
}
  
button:hover {
  color: #10275e;
  background: white;
}
  
button:active {
  color: white;
  background: black;
  padding: 0;
}

button > span {
  position: relative;
}

<body style="background:#10275e">
<button><span>Press Me</span></button>
<body>

edited Jul 10 '19 at 13:07

answered Jul 10 '19 at 12:17

sodimel

864
2
11
24

Thanks, this indeed solved the problem. But I'd prefer a solution that'd not require changing the DOM structure... – dpr Jul 10 '19 at 13:07
1

I think about this solution as a workaround, because the strange inner padding is the expected *unchangeable* behavior for button on ie11. – sodimel Jul 10 '19 at 13:10

score 1 · Answer 2 · answered Jul 10 '19 at 13:45

That is the pressing effect which is added by the Internet Explorer by default.

There is no way to disable or remove it.

If you do not want that effect than below is the another work around that you can try with IE.

<!DOCTYPE html>
<html>
<body>

<h2>Test Button Element</h2>
<a href="#" onclick="myfunction()" role="button"><img src="https://www.freepngimg.com/thumb/submit_button/25387-5-submit-button-clipart-thumb.png"/></a>
</body>
</html>

Output in IE 11:

Here we replace the button with anchor tag which has role of button and we use the image which looks like button inside the anchor tag. So when user click it in IE, they will not get that pressing effect.

Just fyi, using an anchor element for a button is bad practice even though you've used `role="button"`. An anchor is designed for routing the user to a different part of the website, a button should perform actions on the current page (such as submitting a form, toggling some content, adding an item to a list etc.). It's preferable (and recommended) to use a `
` element which will perform exactly as you want it to in your example. — AdamJB, Feb 12 '20 at 11:38

IE11 shifts button text by some px on :hover and :active

2 Answers2