IE9 CSS 汉堡菜单问题

Question

我正在使用 Pure Drawer 脚本为即将推出的站点 (http://advanced1772.inmotionhosting.com/~authenticstoryte/) 生成滑块抽屉导航方案。效果很好，但客户希望它在 IE9 中工作（是的，真的....），而在 IE9 上，汉堡菜单看起来就像刚刚经历了一场拆除德比。我认为这可能是因为它使用了 :before 和 :after 伪元素来生成菜单。那么是否有另一种方法可以使它在 IE9 上工作。抽屉本身很好用。问题出在汉堡包图标上：

HTML

<div class="pure-container" data-effect="pure-effect-slide">
<input type="checkbox" id="pure-toggle-right" class="pure-toggle" data-toggle="right">
<label class="pure-toggle-label" for="pure-toggle-right" data-toggle-label="right">
<span class="pure-toggle-icon"></span> </label>
<div class="pure-drawer" data-position="right">
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-nav-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://advanced1772.inmotionhosting.com/~authenticstoryte/sample-page/">Sample Page</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-17"><a href="http://advanced1772.inmotionhosting.com/~authenticstoryte/2016/04/25/hello-world/">Hello world!</a></li>
</ul>
</div>
</nav>
</div>
<div class="pure-pusher-container">
<div class="pure-pusher">

CSS

.pure-toggle-label { border: none!important; top: 4px!important; }
.pure-toggle-label .pure-toggle-icon {
    transform: translate3d(-50%, -4px, 0);
    -webkit-transform: translate3d(-50%, -4px, 0);
}
.pure-toggle-label .pure-toggle-icon, .pure-toggle-label .pure-toggle-icon::before, .pure-toggle-label .pure-toggle-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4px;
    width: 35px;
    cursor: pointer;
    background: #5d809d;
    display: block;
    content: '';
    transition: all 500ms ease-in-out;
}
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

Answer 1

在 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。

转场效果见：Does IE9 support transition CSS3 effects?

IE9 CSS 汉堡菜单问题

IE9 CSS issues with hamburger menu

javascript

css

internet-explorer-9

navigation-drawer

hamburger-menu