我试图在IE9,IE10和IE11中实现以下功能(在Chrome和FF上完美运行)：
在移动模式下,我有一个主#container包装器,它包含整个站点内容和一个导航侧菜单div,它位于#container内(不能移出,顺便说一句),但是不可见,并且隐藏在屏幕外.当用户单击菜单打开切换按钮时,它应将#container向右滑动,显示直接位于其左侧的导航侧菜单div.使用translateX进行“滑动”,一旦“open”类通过切换应用于它,就会分配.在IE中,我按预期获得动画部分,但没有可见的侧面导航(仅限空白空间).
#container {
height: 100%;
position: relative;
transition: transform ease .5s;
width: 100%;
}
#container.open {
position: fixed;
transform: translateX(300px);
}
#nav-side-menu {
left: -300px;
height: 100%;
overflow: scroll;
position: fixed;
top: 0;
width: 300px;
}
解决方法
这里的问题是使用position：在一个转换元素中修复.根据规范,当使用固定定位元素时…包含块由视口建立.
There is a debate关于转换后的元素是否应该是固定后代的包含块,但Internet Explorer目前不支持这一点.
在这个特定的实例中,您可以通过完全避免CSS转换来避免跨浏览器的复杂性.相反,尝试使用left属性横向移动包含元素.下面是我的标记 – 我相信这是你的合理反映：
<article>
<nav>
<p>This is the navigation portion.</p>
</nav>
<section>
<p>This is the content portion.</p>
</section>
</article>
如上所述,以下方法使得相对定位的容器的关键使用通过转换(自IE10支持)左侧属性而左右移动.我们还使用calc函数(自IE9起支持)来确定更好的尺寸和偏移量：
body {
margin: 0;
overflow-x: hidden;
}
article {
left: -300px;
position: relative;
transition: left 2s;
Box-sizing: border-Box;
width: calc(100% + 300px);
padding: 0 1em 0 calc(300px + 1em);
}
article.open {
left: 0px;
}
nav {
position: fixed;
width: 300px; height: 100%;
margin: -1em auto auto calc(-300px - 1em);
}
这种方法可以在Internet Explorer,Chrome和Firefox中提供更一致的体验.最终结果可在此处在线查看：http://jsfiddle.net/jonathansampson/vxntq8b1/
