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

Question

我試圖在IE9，IE10和IE11中實現以下功能（在Chrome和FF上完美運行）：

在移動模式下，我有一個主#container包裝器，它包含整個站點內容和一個導航側菜單div，它位於#container （不能移出，順便說一句），但是不可見，並且隱藏在屏幕外。 當用戶單擊菜單打開切換按鈕時，它應將#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 在一個轉換元素中position: fixed 。 根據規范，當使用固定定位的元素時...包含塊由視口建立。 關於轉換元素是否應該是固定后代的包含塊存在爭議 ，但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屬性而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/