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问题

回答

相关问题