23

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

Is it possible to disable this feature by using css ?

note: this is just a example, not a real world screenshot

mate64
  • 9,876
  • 17
  • 64
  • 96
  • 2
    Yep. that's how buttons work in IE. It's from the WindowXP school of 3D effects for GUI widgets. If you don't want that effect, don't use a `button` element. – Spudley Jul 19 '11 at 08:42
  • so it's a "feature" of trident ? – mate64 Jul 19 '11 at 09:10
  • 2
    The "movement of the text" is normal, but in your screenshot, the text seems to have moved more than is normal. It usually only moves approximately 1px down and right. What's your HTML/CSS? A [jsFiddle](http://jsfiddle.net/) containing it would help. Also which version(s) of IE? – thirtydot Jul 19 '11 at 09:21
  • 1
    the image is just a example, not a screenshot. whatever, ie moves the inner-button text from 6 to 9. in my opinion it's a useless and bad feature. fu ms. – mate64 Jul 19 '11 at 09:43
  • I thought it was some kind of bug that the text had moved *so much* :D – thirtydot Jul 19 '11 at 10:12
  • What an annoying "feature" of IE. – user17753 Jan 10 '13 at 16:46
  • inner padding is just padding by the way, an outer padding would be a margin – brandito Mar 26 '18 at 01:26

3 Answers3

25

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!

mate64
  • 9,876
  • 17
  • 64
  • 96
Максим К.
  • 249
  • 3
  • 4
18

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.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • thank you thirtydot ! hope ms will erase this feature in common versions. regards. – mate64 Jul 19 '11 at 10:12
  • Actually better always use button for actions that affect the website. And link for actions that do not affect at all. ([When to Use a Button or Link](http://uxmovement.com/buttons/when-to-use-a-button-or-link/)) – rappongy Jan 26 '18 at 03:51
1
<button><span>Submit</span></button>

button:active > span {
 -ms-transform: translate(0px, -0.5px);
}
wilsonpage
  • 17,341
  • 23
  • 103
  • 147
  • Works at least on IE 11 and, if doing `translate(-0.5px -0.5px)` it completely counters the "movement" of the button when it's being pressed. Also, by using the `-ms-transform` property it has no impact on any other browsers. To me, this is the best solution. No need not to use a button tag if it is a button – Dylanbob211 May 04 '20 at 12:30