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

Question

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

用于图标的 CSS 如下（我知道 CSS3 动画中的 none 可以在 IE9 中运行，但这不应该阻止初始触发图标从应该正常显示吧？);

.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

CSS 转换在 IE9 中支持 -ms- 前缀，根据 CanIUse.

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

CSS Hamburger menu icon not displaying properly in ie9

css

pseudo-class

internet-explorer-9

hamburger-menu