IE9ハンバーガーメニューのCSSの問題

Question

私はPure Drawerスクリプトを使用して、今後のサイト（）のスライダードロワーナビゲーションスキームを生成しています。素晴らしいですが、クライアントは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 IE9エミュレーションでページでテスト

.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

、私はこれらを追加しました：

これは去る

.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?