我正在开发一个网站，其中包含一组堆叠在一起的div。要导航，请单击其中一个图层，然后单击覆盖所单击图层的其他图层向右滑动。这些图层应该缓慢滑动（过渡时间设置为0.7秒）。
这在除了IE 10之外的所有现代浏览器中都很有用。在那里，最顶层的图层滑动得更快（从右到左），当图层位于屏幕的右边缘并且您将鼠标悬停在它上面时，它会弹出立即出来，而不是顺利过渡。谁能告诉我为什么会这样？我的CSS错误还是IE的问题？
这是应用于每一层的CSS：
position: absolute;
left: 160px; // this value differs slightly for every layer
-webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
这是应用于向右滑动的图层的CSS：
left: 100%;
这是应用于鼠标悬停时向右滑动的图层的CSS（它应该向左滑出一点）：
left: 96%;
left: -webkit-calc(100% - 40px);
left: -moz-calc(100% - 40px);
left: -ms-calc(100% - 40px);
left: -o-calc(100% - 40px);
left: calc(100% - 40px);
以下是该网站的链接：Test site
更新：我注意到当我从mouseover类中取出calc（）属性时，动画可以顺利运行。显然，IE无法正确设置包含calc（）的属性的动画。 This ticket也说了。
现在我尝试仅使用单独的外部样式表定位Internet Explorer。但IE 10 dropped support for conditional comments。任何帮助？
提前致谢！