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

Question

我正在尝试在 IE9、IE10 和 IE11 中实现以下功能（在 Chrome 和 FF 上完美运行）：

在移动模式下，我有一个包含整个网站内容的主要 #container 包装器和一个位于 #container 内部的导航侧边菜单 div（无法移出，顺便说一句），但不可见并且隐藏在屏幕外。当用户单击菜单打开切换按钮时，它应该向右滑动 #container，显示直接位于其左侧的导航侧边菜单 div。 "sliding" 正在使用 translateX 发生，一旦通过切换将 "open" class 应用到它，它就会被分配。在 IE 中，我得到了预期的动画部分，但没有可见的侧导航（仅限空 space）。

#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 转换元素的使用。根据规范，当使用 fixed-positioned 元素时 ...包含块由视口建立。 There is a debate 关于转换后的元素是否应该是包含块固定后代，但 Internet Explorer 目前不支持此功能。

在此特定实例中，您可以通过完全避免 CSS 转换来避免 cross-browser 并发症。相反，请尝试使用 left 属性横向移动包含元素。下面是我的标记——我相信这是对你的合理反映：

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

如上所述，以下方法主要使用相对定位的容器，通过转换（自 IE10 起支持）left 属性移动 side-to-side。我们还使用 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 中产生了更一致的体验。 end-result 可以在这里在线查看：http://jsfiddle.net/jonathansampson/vxntq8b1/

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

Why doesn't translateX work as expected for fixed elements on IE9, IE10, and IE11?

html

css

internet-explorer

css-position