Question

我只使用从codrops网站获得的CSS3代码，在我的网站标题中插入了一个'汉堡包'菜单图标。该图标使用伪类：之前和之后，它在最新版本的Chrome和IE11中完美运行。但是，使用IE9（我们的组织在工作中使用），初始触发器图标甚至不能正确显示，并且只有3行（我认为中间线）中的一行在加载页面时是可见的。我以前在使用这些伪类的IE9时没有任何问题。我已经检查过我的html中没有任何内容使IE9恢复到怪异模式，并且可以确认IE9标准模式中出现此问题。我还检查了codrops网站http://tympanus.net/Tutorials/AnimatedBorderMenus/index2.html上的原始演示，同样的问题也出现了。我也在我的工作地点之外使用了IE9，同样的事情发生了，只有一行'汉堡包'是可见的。

用于图标的CSS在下面（我知道在IE9中没有任何CSS3动画可以工作，但这不应该阻止初始触发图标正常显示吗？）;

.bt-menu-trigger {
    position: fixed;
    top: 22px;
    left: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1100;
}

.bt-menu-trigger span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    margin-top: -2px;
    background-color: #fff;
    font-size: 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

.bt-menu-open .bt-menu-trigger span {
    background-color: transparent;
}

.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.bt-menu-trigger span:before {
    -webkit-transform: translateY(-250%);
    transform: translateY(-250%);
}

.bt-menu-trigger span:after {
    -webkit-transform: translateY(250%);
    transform: translateY(250%);
}

.bt-menu-open .bt-menu-trigger span:before {
    -webkit-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}

.bt-menu-open .bt-menu-trigger span:after {
    -webkit-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}

网页中使用的HTML标记为：

<nav id="bt-menu" class="bt-menu">
    <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
    <ul>
        <li><a href="http://www.acutemedicinebhh.com/home.html">home</a></li>
        <li><a href="http://www.acutemedicinebhh.com/documents.html">documents</a></li>
        <li><a href="http://www.acutemedicinebhh.com/medical-on-call.html">medical on-call</a></li>
        <li><a href="http://www.acutemedicinebhh.com/learning.html">learning</a></li>
        <li><a href="http://www.acutemedicinebhh.com/acp.html">acp</a></li>
        <li><a href="http://www.acutemedicinebhh.com/nursing.html">nursing</a></li>
        <li><a href="http://www.acutemedicinebhh.com/about-us.html">about us</a></li>
    </ul>
</nav>

任何有关如何在IE9中正确显示汉堡包的帮助都将非常感谢！

Answer 1

根据CanIUse，IE9支持带有 -ms - 前缀的CSS转换。

CSS汉堡菜单图标在ie9中无法正常显示

1 个答案: