Как убрать дефолтную анимацию нажатия на button в IE 9, 10, 11?

#javascript #html #css #вёрстка #internet_explorer

В IE 9, 10, 11 прыгают button при нажатии. Свойства margin: 0 и padding: 0 на псевдоклассы
:active и :focus проблемы не решают. Пример съезжания кнопок на видео:
https://monosnap.com/file/Lcln7cTFX0lPwWjbeu5JnQA5ikcefn
    

Ответы

Ответ 1

Глобальное решение без лишних вложенных элементов:



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;
  }
}



Ответ 2

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



Ответ 3

Решение тестировалось на IE 11. Работает фокус с вычитанием по одному пикселю слева
и сверху у внутренних полей и прибавлением справа и снизу, соответственно:



button {
  padding: 10px;
  background: #fff;
  border: 1px solid;
}


button:active {
  padding: 9px 11px 11px 9px;
  background: #999;
}



Ответ 4

Самое простое и надежное: заменить