使用IE 10进行CSS转换

Question

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

这是在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 个解决方案

解决方案1
4 已采纳 2014-01-01 04:46:28

解决方案2
1 2013-12-31 05:33:16

使用IE 10进行CSS转换

问题描述

2 个解决方案

解决方案1 4 已采纳 2014-01-01 04:46:28

解决方案2 1 2013-12-31 05:33:16

解决方案1
4 已采纳 2014-01-01 04:46:28

解决方案2
1 2013-12-31 05:33:16