CSS 过渡在 IE 11 中不起作用

Question

这里已经有一个类似的问题：Css transition not working

问题是不同的。我不在任何地方使用calc()，既不在“损坏”元素上，也不在任何与之相关的地方。

我有一个菜单，用于选择网站的语言，我通过设置margin-left: 100%; 将其推到了右边界之外。单击复选框应触发它回退到margin-left: initial;，从而对用户可见。再次点击复选框，菜单会再次消失（margin-left: 100%;）。

两个margin-left 设置都有一个transition: margin-left .4s，以使其对用户更具吸引力。

此设置与 Firefox 和 Chrome 完美配合。语言选择从右侧滑入，点击相应语言版本的链接，菜单顺利滑出窗口。完全符合我的意图。

但是，它不适用于 IE 11。菜单仍然不可见。通过阅读上面链接的问题，我认为它可能与不使用固定大小的菜单有关。我改变了它，但没有用。

在 Firefox 和 Chrome 中，单击复选框会触发菜单按预期滑入和滑出窗口。在 IE11 中，按钮文本的更改（基本上是复选框下方的 p）被应用，但菜单仍然不可见。

其他信息

与链接的问题不同，我确实不使用供应商前缀。但是，我测试了如果我这样做会发生什么，但我也没有成功。我似乎也没有与前缀问题相关联。

代码

这是相关元素的代码：

#language-selection {
	position: relative;
	margin-top: 65px;
	margin-left: 100%;
	transition: margin-left .4s;
}

#language-selection-checkbox:checked ~ #language-selection-wrapper #language-selection {
	margin-left: initial;
	transition: margin-left .4s;
}

还请注意，添加或删除 position: relative; 对问题完全没有影响。

Answer 1

initial值IE不支持，你可以查看here，你可以试试其他值，比如auto或者任何你喜欢的length