使用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