IE9與漢堡包菜單的CSS問題

我正在使用Pure Drawer腳本爲即將到來的網站生成滑塊抽屜導航方案（）。雖然效果很好，但客戶希望它能夠在IE9中工作（是的，真的......），並且在IE9上，漢堡菜單看起來像剛剛經歷了拆除德比。我認爲這可能是因爲它使用的事實：之前和之後：僞元素生成菜單。那麼是否有另一種方法可以在IE9上完成這項工作。抽屜本身工作得很好。這是漢堡圖標是這樣的問題：IE9與漢堡包菜單的CSS問題

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; 
}

來源

2016-05-03 Adam Bell

你可能只是缺少微軟特定的語法 '-ms變換：translate3d（-50％，-4px，0）;' – dmoo

獲取新客戶。呵呵...... –

IE9不支持3D轉換，只支持2D。 – LGSon

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

來源

2016-05-03 19:15:57 yezzz

謝謝。雖然我注意到點擊，漢堡不再是一個X，但不僅僅是兩條線，它們之間有很多分離。 –

嗯很奇怪，它在IE11中使用IE9仿真效果很好 – yezzz

看看另一個瀏覽器中的.pure-toggle-icon。當你看到X時，檢查各種樣式：簽入它。他們是具有各種CSS路徑的長列表。我發現2有一個變換風格。用-ms-前綴添加相同的轉換。我認爲這應該解決IE9 X問題。 – yezzz

IE9與漢堡包菜單的CSS問題

回答

相關問題