为什么translateX不能像IE9，IE10和IE11上的固定元素一样工作？-Java 学习之路

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

在移动模式下，我有一个主 #container 包装器，它包含整个站点内容和一个导航侧菜单div，它位于 #container 内（不能移出，顺便说一句），但是不可见并隐藏在屏幕外 . 当用户单击菜单打开切换按钮时，它应该向右滑动 #container ，显示直接位于其左侧的导航侧菜单div . "sliding"正在使用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;
}

1 回答

12
这里的问题是在转换元素中使用 position: fixed . 根据规范，当使用固定定位的元素时...包含块由视口 Build . 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支持） 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/
回复于 2024-04-28T00:31:00+08:00

为什么translateX不能像IE9，IE10和IE11上的固定元素一样工作？

1 回答

相关问题