我试图在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/
原文地址:https://www.jb51.cc/html/226153.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。