Internet Explorer button:active inner-padding

Question

Trident <=9 seems to append something like an inner-padding to active button elements.

Is it possible to disable this feature by using css ?

Answer 1

In Microsoft Internet Explorer 11+ you can fix it! Use position: relative for inner elements of button.

html:

<button><span>Submit</span></button>

css:

button > span{position:relative}

Enjoy!

Answer 2

Update: For IE11+, it can be removed.

---

No, you can't get rid of it (in old versions of Internet Explorer).

As @Spudley said:

If you don't want that effect, don't use a button element.

If it really matters, then an a element is the only alternative, but it's not really worth switching just to fix this. Users of Internet Explorer are used to it.

Answer 3

<button><span>Submit</span></button>

---

button:active > span {
 -ms-transform: translate(0px, -0.5px);
}