使用 IE 10 进行 CSS 过渡

所以我有这个小的CSS过渡，在Firefox和Chrome（最新版本）中都很好用。但是，它看起来像IE 10中的垃圾（无法正确呈现）。我想知道是否有一些技巧可以让它像在其他浏览器中一样出现。

这是代码笔上的笔的链接（在IE 10中查看）。在Chrome或Firefox中效果很好。

我在这里包含了所有代码，因为我知道有些人讨厌它不在问题中。但都可以在笔中查看。无论如何，深入了解我如何解决这个问题都会很棒。

.CSS：

#menu-icon {
    border-radius: 0.2em;
    display: block;
    color: white;
    font-size: 4em;
    font-weight: 900;
    width: 1.5em;
    background: grey;
    letter-spacing: -0.17em;
    line-height: 0.4em;
    position: absolute;
    bottom: 8em;
    left: 4em;
    height: 1.4em;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}
#menu-icon span {
    display: inline-block;
    padding: 0px;
    margin: 0px;
}
.menu-bar {
    top: -0.4em;
    position: relative;
    width: 90%;
    margin-left: 0%;
    margin-right: 10%;
}
.menu .bar-left {
            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
}
.menu .bar-right {
            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
}
.arrow .bar-left {
    height: 0.3em;
    -webkit-transform: translate(0.34em, 0.05em) rotate(35deg);
       -moz-transform: translate(0.34em, 0.05em) rotate(35deg);
            transform: translate(0.34em, 0.05em) rotate(35deg);
            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
            transform-origin: center center;
    -webkit-transform-origin: center center;
}
.arrow .bar-right {
    height: 0.3em;
    -webkit-transform: translate(-0.34em, 0.15em) rotate(-35deg);
       -moz-transform: translate(-0.34em, 0.15em) rotate(-35deg);
            transform: translate(-0.34em, 0.15em) rotate(-35deg);
            transition:         transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
            transform-origin: center center;
    -webkit-transform-origin: center center;
}

.HTML：

<div id="menu-icon" >
    <div class="menu-bar">
        <span class="bar-left ">_</span>
        <span class="bar-right ">_</span>
    </div>
    <div class="menu-bar">
        <span class="bar-left ">_</span>
        <span class="bar-right ">_</span>
    </div>
    <div class="menu-bar">
        <span class="bar-left ">_</span>
        <span class="bar-right ">_</span>
    </div>
</div>

.JS：

function init() {
    var menu = document.getElementById("menu-icon");
    if(menu.addEventListener) {
        menu.addEventListener("click", function() { 
            if(menu.className=="arrow") {
                menu.className = "menu";
            } else {
                menu.className = "arrow";
            }
        }, false);
    } else if(menu.attachEvent) {
        menu.attachEvent("onclick", function() {
            if(menu.className=="arrow"){
                menu.className = "menu";
            }else{
                menu.className = "arrow";
            }
        });
    }
};
if(window.addEventListener) {
    window.addEventListener("load", init, false);
} else if(window.attachEvent) {
    window.attachEvent("onload", init);
} else {
    document.addEventListener("load", init, false);
}

这与其说是一个答案，不如说是"为什么"会发生这种情况，只是一种处理它的方法......这个问题的真正答案只是Internet Explorer很糟糕。

相反，作为一点解决方法，IE似乎比其他元素上的动画比文本更好地处理动画。因此，我的建议是去掉跨度中的下划线，然后设置span元素的样式使其看起来相同。我已经制作了您的笔的修改版本来显示它（代码可能有点混乱，因为我只是从您所拥有的东西中破解了它，所以请记住那里有改进的余地）

http://codepen.io/anon/pen/DGnwt

使用供应商前缀：

-ms-

例：

-ms-transform: translate(0.34em, 0.05em) rotate(35deg);

在这里，您可以找到有关供应商前缀的更多信息：http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

但更好的解决方案是删除 CSS 中的所有前缀。示例，仅使用以下内容：

transform: translate(0.34em, 0.05em) rotate(35deg);

然后转到此页面，http://modernizr.com/单击"生产"并检查您使用过的所有功能，它将为您添加带有前缀的必要CSS行，以支持多个浏览器。下载它。把它放进去

<head></head>

就像一个Javascript文件。

你也可以使用这个：http://leaverou.github.io/prefixfree/

相关内容

最新更新

热门标签：