Javascript IE9汉堡包菜单的CSS问题

我正在使用纯抽屉脚本为即将到来的站点（）生成一个滑动抽屉导航方案。很好，但客户希望它在IE9中工作（是的，真的…），在IE9上，汉堡包菜单看起来就像刚刚经历了一场拆除德比。我认为这可能是因为它使用了：before和：after伪元素来生成菜单。那么，有没有其他方法可以在IE9上实现这一点呢。这个抽屉本身就很好用。问题出在汉堡图标上：

HTML

---

在IE9仿真中使用您的页面进行测试，我添加了以下内容：

.pure-toggle-label .pure-toggle-icon::after {
    -ms-transform: translate(-50%, 10px);
}
.pure-toggle-label .pure-toggle-icon::before {
    -ms-transform: translate(-50%, -14px);
}

这将使translate3d保持独立，尽管看起来您实际上只需要2d

---

有关过渡效果，请参见：

在IE9仿真中使用您的页面进行测试，我添加了以下内容：

.pure-toggle-label .pure-toggle-icon::after {
    -ms-transform: translate(-50%, 10px);
}
.pure-toggle-label .pure-toggle-icon::before {
    -ms-transform: translate(-50%, -14px);
}

这将使translate3d保持独立，尽管看起来您实际上只需要2d

---

有关转换效果，请参见：

您可能只是缺少microsoft特定的语法“-ms transform:translate3d（-50%，-4px，0）；”找一个新客户。呵呵…IE9不支持3D转换，只支持2D。如果将html和css复制粘贴到JSFIDLE，可能会导致其他浏览器出现同样的问题。你确定你的代码是正确的吗？您可能只是缺少microsoft特定的语法“-ms transform:translate3d（-50%，-4px，0）；”找一个新客户。呵呵…IE9不支持3D转换，只支持2D。如果将html和css复制粘贴到JSFIDLE，可能会导致其他浏览器出现同样的问题。你确定你的代码是正确的吗？谢谢虽然我在点击时注意到，汉堡不再是一个X，而不仅仅是两行，它们之间有很多分隔。嗯，奇怪，它在IE11和IE9模拟中工作得很好。看看另一个浏览器中的.pure切换图标。当您看到X时，请使用：checked in检查各种样式。它们是包含各种css路径的长列表。我发现2个具有变换样式。添加带有-ms-前缀的相同转换。我想这应该可以解决IE9X的问题。是的，我想我找到了。还没有检查IE9，但我会的。谢谢谢谢虽然我在点击时注意到，汉堡不再是一个X，而不仅仅是两行，它们之间有很多分隔。嗯，奇怪，它在IE11和IE9模拟中工作得很好。看看另一个浏览器中的.pure切换图标。当您看到X时，请使用：checked in检查各种样式。它们是包含各种css路径的长列表。我发现2个具有变换样式。添加带有-ms-前缀的相同转换。我想这应该可以解决IE9X的问题。是的，我想我找到了。还没有检查IE9，但我会的。谢谢

.pure-toggle-label .pure-toggle-icon::after {
    -ms-transform: translate(-50%, 10px);
}
.pure-toggle-label .pure-toggle-icon::before {
    -ms-transform: translate(-50%, -14px);
}