In IE 9, 10, 11, the button jumps when pressed. Properties margin: 0 and padding: 0 for pseudo-classes :active and :focus do not solve problems. An example of moving buttons on video: https://monosnap.com/file/Lcln7cTFX0lPwWjbeu5JnQA5ikcefn

  • one
    Can you still show the code with a minimally reproducible example - Duck Learns to Cover
  • I didn’t understand much on the video, but from the baldies I’ll suggest that line-height set to some - andreymal
  • one
    @ Duck Learning the usual button without styles open in IE and see. What example do you want? Or do you put the same question under each question? - user232857 February
  • @AndreyYanov opened. I did not see any problems. Catch a minus until there is a minimum reproducible example ( ru.stackoverflow.com/help/mcve ) - Duck Learns to Take Cover
  • @ Duck LEARNS because someone confuses Edge and IE. - user232857

4 answers 4

Global solution with no extra nested elements:

 button { padding: 10px; background: #fff; border: 1px solid; } button:active, button:focus { position: гelative; background: #999; } /* стили только для IE9 */ @media screen and (min-width:0\0) { button:active, button:focus { top: -1px; left: -1px; } } /* стили только для IE10 и IE11 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { button:active, button:focus { top: -1px; left: -1px; } } 
 <button> click me </button>

  • 2
    In 11 it does not work. - Sasha Omelchenko
  • 2
    also checked does not work in ie10, ie11 - soledar10

 button > span, button:active span, button:focus span { position:relative; top: 0; left: 0; } 
 <button><span>Button</span></button>

  • And where does the span? - user232857 February
  • span nothing to do with, you can use any other tag inside the button. This is a hack to remove the backlash from the button in ie - soledar10
  • Content is located directly on the button, not the span. Also in the button there can only be i. - user232857 February
  • 2
    By the way, I don’t understand why then we <button> if we trample all the semantics of markup with hacks, if they are arbitrarily styled controls, make them divas and think less about cutting crutches - Duck Learns to Cover
  • one
    @ Duck The LEARN button is semantic, only the designers do not like button jumping. Yes, and users too. The site should work in all browsers. Well, instead of using the button span - is nonsense, agree. - user232857

The solution was tested on IE 11. The focus works by subtracting one pixel one by one from the left and from the top by the internal fields and adding by the right and from the bottom, respectively:

 button { padding: 10px; background: #fff; border: 1px solid; } button:active { padding: 9px 11px 11px 9px; background: #999; } 
 <button>click me</button>

  • But in other browsers it jumps =) A vile decision. Or suggest to use hacks to determine IE? In any case, for each button to prescribe styles for correction in IE is nonsense. - Vadizar
  • @Vadizar and sho do? The main thing satisfies the conditions of the task. - br3t
  • not very convenient option, although it works - user232857

The simplest and most reliable: replace <button> with <a> In the bootstrap, which was written by more than one person, the behavior of the button is not extinguished. I use <a> http://getbootstrap.com/css/#buttons in my project - in the example the Link button

You can also connect for IE css, which compensates for the offset without adding internal tags: .btn {padding: 1px 0px 0px 1px; } .btn: active {padding: 0px 1px 1px 0px; }

there may be additional undesirable behavior of neighboring objects, but in this direction you can dig.

  • one
    Because Bootstrap, like normalize.css, is nonsense. There, the outline of the fields is also not repaid, but there is nothing complicated about it. So do yourself idols and think that if they can't do it, then I am stupid. You need to think with your head. Use <a> in this example is invalid. Link! = Button. - Vadizar