IE11 сдвигает текст кнопки на несколько пикселей на: hover и: active - PullRequest
Новая
       75

IE11 сдвигает текст кнопки на несколько пикселей на: hover и: active

0 голосов
/ 10 июля 2019

Возьмите фрагмент кода ниже.

Кнопка в примере должна стать черной при mousedown (:active) - что работает довольно хорошо - но IE11 дополнительно смещает текст кнопки на несколько пикселей вправо вниз, если мышь находится на кнопке (:hover) , Вы можете увидеть это, нажав кнопку и отодвинув мышь от кнопки, удерживая ее нажатой - кнопка остается активной, но как только курсор покидает кнопку, текст смещается назад:

enter image description here

Все остальные браузеры (даже Edge) работают как нужно.

Так как в инструментах разработчика IE11 может применяться только псевдокласс :hover, я понятия не имею, откуда происходит этот сдвиг. Я уже пытался указать отступы и поля для кнопки, но безуспешно. 

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>

Кто-нибудь может подсказать, как заставить IE11 не сдвигать текст кнопки на :active и :hover?

Это не имеет ничего общего с гибким стилем, так почему это должно быть дураком?

Ответы [ 2 ]

1 голос
/ 10 июля 2019

Это эффект нажатия, который по умолчанию добавляется Internet Explorer.

Нет способа отключить или удалить его.

Если вы не хотите, чтобы этот эффект был нижедругая работа, которую вы можете попробовать с IE. 

<!DOCTYPE html>
<html>
<body>

<h2>Test Button Element</h2>
<a href="#" onclick="myfunction()" role="button"><img src="https://www.freepngimg.com/thumb/submit_button/25387-5-submit-button-clipart-thumb.png"/></a>
</body>
</html>

Вывод в IE 11:

enter image description here

Здесь мы заменяем кнопку тегом привязки, которыйимеет роль кнопки, и мы используем изображение, которое выглядит как кнопка внутри тега привязки.Поэтому, когда пользователь щелкает его в IE, он не получит этот эффект нажатия.

1 голос
/ 10 июля 2019

Нашел решение в другой ветке (из этот вопрос)!

Для решения нужны некоторые изменения в вашем коде (ввод должен быть элементом кнопки), потому что мы хотим использовать интервал внутри кнопки. 

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