Как исправить: я создал "X", используя только CSS, но в ie11 он перемещается при нажатии - PullRequest
Новая
       35

Как исправить: я создал "X", используя только CSS, но в ie11 он перемещается при нажатии

0 голосов
/ 13 июня 2019

Я создал кнопку X, используя только CSS. Он хорошо отображается во всех браузерах, кроме как на ie11. В ie11 кнопка накладывается на границу, но когда она нажата, она немного перемещается вниз в правильное место, как это должно быть. Я понятия не имею, как это исправить, и перепробовал кучу разных способов. Этот код scss кстати. 

   button {
    width: 50px;
    height: 50px;
    right: 15px;
    top: 15px;
    padding: 0;
    position: absolute;
    border: none;
    background-color: transparent;

    &:hover { cursor: pointer; }

    &:before, &:after {
        content: '';
        width: 100%;
        height: 2px;
        background-color: blue;
        display: block;
        position: absolute;
    }

    &:before {
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
    }
    &:after {
        -webkit-transform: rotateZ(-45deg);
        -moz-transform: rotateZ(-45deg);
        -ms-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
    }
}
}

Ответы [ 2 ]

0 голосов
/ 14 июня 2019

Какую версию IE11 вы используете?Код хорошо работает в моем IE11, версия которого 11.116.18362.0.Я сделал простую демонстрацию: 

button {
  width: 50px;
  height: 50px;
  right: 15px;
  top: 15px;
  padding: 0;
  position: absolute;
  border: none;
  background-color: transparent; }
  button:hover {
    cursor: pointer; }
  button:before, button:after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: blue;
    display: block;
    position: absolute; }
  button:before {
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    transform: rotateZ(45deg); }
  button:after {
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg); }
<link rel="stylesheet" type="text/css" href="demo-style.css">
<button></button>

Я использую ваш scss, чтобы скомпилировать его в файл css и затем импортировать его на страницу.«Х» не будет двигаться в IE11.Если вы используете более старую версию IE11, я предлагаю вам перейти на последнюю версию и попробовать снова.

0 голосов
/ 13 июня 2019

Я бы использовал медиазапрос плюс свойство position плюс !important (не рекомендуется, но мы хотим быть absolute уверены), чтобы запретить перемещение кнопки куда-либо, если браузер имеет версию 10 или выше.Код, который я бы использовал, был бы примерно таким: 

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {  /*media query for ie10+*/
    button {
        position:absolute !important;
    }
}

В противном случае возникает еще один вопрос здесь , в котором также упоминаются прыгающие элементы, но это было из ie8.Проблема была решена с помощью display:block.

...