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

IE不支持

initial值，可以查看here , 您可以尝试其他值，例如 auto 或您喜欢的任何 length