Search code examples
cssinternet-explorer-11ie11-developer-tools

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

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:

enter image description here

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?

Solution

  • 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>