Блог

Главная - Вопросы по программированию - Как исправить откатную ссылку в IE11

Как исправить откатную ссылку в IE11

#html #css #internet-explorer #compatibility

#HTML #css #internet-explorer #совместимость

Вопрос:

Я использую 3D-рулонные ссылки на своем веб-сайте, используя HTML5 и CSS3.

Я привык делать Modernizr доступным для IE и более старых браузеров, но IE11 обнаружен как совместимый с 3D-анимацией css… и это не так.

В IE 11 :

ожидаемый :

введите описание изображения здесь

фактический результат :

введите описание изображения здесь

Итак, вопрос :

Как я могу использовать Modernizr on Internet Explorer 11 ? Цель состоит в том, чтобы использовать 3D-рулонные ссылки или запасной вариант для неанимированного CSS.

Вот мой HTML-код <head> :

  <!--[if IE]>
    <script src="js/modernizr.js"></script>
 <![endif]-->

Вот CSS, который я использую :

 /* ROLL LINKS */
.roll {
    display: inline-block;   
    overflow: hidden;
    vertical-align: top; 

    -webkit-perspective: 600px;
       -moz-perspective: 600px;
        -ms-perspective: 600px;
            perspective: 600px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;    

}
.roll:hover {text-decoration: none;}

.roll span {
    display: block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;

}
.roll:hover span {
        background: #b1162c;

        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
            -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }

.roll span:after {
    content: attr(data-title);
    display: block; 
    position: absolute; 
    left: 0;
    top: 0;
    padding: 0 2px;

    color: #fff;
    background: #b1162c;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
    
    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

Ответ №1:

Есть CSS-трюк, позволяющий использовать резервные ссылки с 3D-роликами в несовместимом браузере. Добавьте это в свой CSS : 

 /* no 3d transform fix */
.no-csstransforms3d .roll span:after {
display:none;
}
.no-csstransforms3d .roll:hover span {
color:#fff;
background:#b1162c;
}
.no-csstransforms3d .roll:hover span {
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
transform: none
}
/* ie10 fix */
.no-cssreflections .roll span:after {
display:none;
}
.no-cssreflections .roll:hover span {
color:#fff;
background:#b1162c;
}
.no-cssreflections .roll:hover span {
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
transform: none
}

Как вы можете видеть, вам нужно Modernizr активировать этот запасной вариант, который представляет собой просто цветную ссылку. И пока этот [if IE] метод работает для Internet Explorer 8, 9, 10… это не будет работать в IE11. Потому что Microsoft думала, что их браузер теперь может обрабатывать «современное» кодирование (и оооо, они ошибались).

Итак, хитрость заключается в том, чтобы использовать javascript для загрузки modernizr.js если в браузере установлен IE11. Просто добавьте это в свой HTML-код <head> :

 <script type="text/javascript">
 if(window.ActiveXObject || "ActiveXObject" in window){   
  <!-- 
  var n='<script src="js/modernizr.js">';
  var d='</script>';
  document.write(n   d); // 
  -->
 }
 </script>

Это приведет к записи страницы HTLM по-другому, если обнаружен IE11, путем добавления <script src="js/modernizr.js"></script> в код. Это просто сложнее [if IE] .

Если вы объедините свои предыдущие CSS и HTML с этим резервным CSS и этим javascript для обнаружения IE11, все будет в порядке.

Комментарии:

1. У меня пока нет ничего, чтобы сделать это в Интернете. Как если бы я был единственным, кто беспокоился о моей анимации CSS3 в IE11. Подумал, что это может быть хорошим подспорьем.