在IE 11上：

预期：

enter image description here

实际结果：

enter image description here

所以问题是：

如何在Modernizr上使用Internet Explorer 11？目标是在非动画CSS上使用 3D Roll Links 或后备。

这是我的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 );
}

Answer 1

在不兼容的浏览器上使用 3D Roll Links 进行回退是一个CSS技巧。将其添加到您的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上运行。因为微软认为他们的浏览器现在可以处理＆＃34;现代＆＃34;编码（而且他们错了）。

因此，如果浏览器是IE11，诀窍是使用javascript加载 modernizr.js 。只需将其添加到您的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>

如果检测到IE11，则会通过向代码添加<script src="js/modernizr.js"></script>来以不同方式编写HTLM页面。它只是一个更加困难的[if IE]。

如果你将以前的CSS和HTML结合到这个CSS后备和这个用于IE11检测的javascript，你会没事的。

如何在IE11中修复滚动链接

在IE 11上：

预期：

实际结果：

1 个答案: