0

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

用于图标的 CSS 如下（我知道任何 CSS3 动画都不能在 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 中正确显示汉堡包的帮助将不胜感激！

4

1 回答 1

0

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

于 2015-03-09T02:18:04.777 回答