Question

所以我有一个小的CSS过渡，在Firefox和Chrome（最新版本）中都运行良好。然而，它看起来像IE 10中的垃圾（无法正确渲染）。我想知道是否有一些黑客可以像在其他浏览器中那样出现。

以下是pen on codepen的链接（在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);
}

Answer 1

这不是“为什么”这种情况发生的答案，只是一种处理它的方法......这个问题的真正答案就是Internet Explorer很糟糕。

相反，就像一个小的解决方法，IE似乎更好地处理其他元素上的动画，而不是文本。因此，我的建议是在您的跨度中取出下划线，并将span元素的样式设置为相同。我已经修改了你的笔的版本以显示它正在使用中（代码可能有点乱，因为我只是从你所拥有的内容中删除了它，所以请记住，那里有改进的余地）

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

Answer 2

使用供应商前缀：

-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/

使用IE 10进行CSS转换

2 个答案: