html 自定义元素 ie9,html – 为什么translateX不能像IE9,IE10和IE11上的固定元素一样工作？...

这里的问题是使用position：在一个转换元素中修复.根据规范,当使用固定定位元素时…包含块由视口建立.

There is a debate关于转换后的元素是否应该是固定后代的包含块,但Internet Explorer目前不支持这一点.

在这个特定的实例中,您可以通过完全避免CSS转换来避免跨浏览器的复杂性.相反,尝试使用left属性横向移动包含元素.下面是我的标记 – 我相信这是你的合理反映：

This is the navigation portion.

This is the content portion.

如上所述,以下方法使得相对定位的容器的关键使用通过转换(自IE10支持)左侧属性而左右移动.我们还使用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/