为什么我的切换在 Internet Explorer 中不起作用？答案

【问题标题】：Why does my toggle not work in Internet Explorer?为什么我的切换在 Internet Explorer 中不起作用？
【发布时间】：2017-06-20 10:38:37
【问题描述】：

我正在切换一个元素并返回到屏幕。它工作得很好，但在资源管理器中不行。我如何使它也与资源管理器兼容。你能帮忙吗？

在此处查看我的示例：

JSFIDDLE

/*START makes text-over-photo div collapse and expand horizontally*/
$(document).ready(function() {
    $("#togglebutton").click(function() {
        var $container = $('#text-over-photo-container');
        $container.toggleClass('hide2');
    });
});


$('#togglebutton').click(function() {
    $(this).toggleClass('glyphicon glyphicon-remove');
    $(this).toggleClass('glyphicon glyphicon-plus');
});

【问题讨论】：

这个可能的重复确实解决了在这些情况下使用 calc 的问题，并建议使用translateX - 它还引用了有关它为什么不起作用的更多信息 - IE 10 + 11: CSS transitions with calc() do not work - 专门为你使用 transform: translateX(-90%); 似乎可以工作 ► jsfiddle.net/4joxxLvc
但是，rblarsen 的回答保持 60px 的边距，即使在响应式设计中也是如此。在您的示例中，当窗口调整大小时，边距是可变的/变化的。
因此我只发表评论并没有提供答案:)
谢谢你，弗兰！

标签： javascript jquery css internet-explorer

【解决方案1】：

尝试为您的 transition 和 transform 添加前缀：JSFIDDLE

编辑：我刚刚在 IE 中测试了我的小提琴，发现翻译中的 calc 是问题所在。我删除了 calc 并添加了一个边距以使 60px 均匀，这在 IE11 中有效：JSFIDDLE

【讨论】：