html - 为什么 translateX 对于 IE9、IE10 和 IE11 上的固定元素不能按预期工作？

Question

我正在尝试在 IE9、IE10 和 IE11(在 Chrome 和 FF 上完美运行)中实现以下目标:

在移动模式下，我有一个主要的#container 包装器，它包含整个网站内容和一个位于#container 内的导航侧边菜单div(无法移动out, btw), yet 是不可见的并且隐藏在屏幕外。当用户单击菜单打开切换按钮时，它应该将 #container 滑动到右侧，显示直接位于其左侧的导航侧菜单 div。 “滑动”是使用 translateX 发生的，一旦“开放”类通过切换应用到它，它就会被分配。在 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;
}

Answer 1

这里的问题在于使用 position: fixed inside 转换后的元素。根据规范，当使用固定位置元素时...包含 block 由视口(viewport)建立。 There is a debate关于转换后的元素是否应该是固定后代的包含 block ，但 Internet Explorer 目前不支持这一点。

在这种特殊情况下，您可以通过完全避免 CSS 转换来避免跨浏览器的复杂性。相反，请尝试使用 left 属性横向移动包含元素。下面是我的标记——我相信这是对你的合理反射(reflect):

<article>
    <nav>
        <p>This is the navigation portion.</p>
    </nav>
    <section>
        <p>This is the content portion.</p>
    </section>
</article>

如上所述，以下方法主要使用相对定位的容器，通过转换(从 IE10 开始支持)left 属性左右移动。我们还使用 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/