IE9 Проблемы с CSS с меню гамбургера

Question

Я использую сценарии Pure Drawer для создания схемы навигации ползунка для предстоящего сайта(). Отлично работает, но клиент хочет, чтобы он работал в IE9 (да, действительно ...), а на IE9 меню гамбургеров выглядит так, будто оно просто прошло через дерби. Я думаю, это может быть из-за того, что он использовал: до и: после псевдоэлементов для создания меню. Так есть альтернативный метод, чтобы сделать эту работу над 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?