Internet Explorer 中的 CSS 过渡闪烁

Question

我对 Internet Explorer 中的这段代码有疑问：

CSS：

.nav-fillpath a {
    width: 100px;
    height: 100px;
    position: absolute;
    display: block;
    bottom: 0%;
    left:0;
    right:0;
    color: #3e3e3e;
    margin-left:auto;
    margin-right:auto;
    outline: none;
    font-family: Arial;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    z-index: 1000;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}
.nav-fillpath a strong {
    color: #cd575b;
}

.nav-fillpath .icon-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
    position: absolute;
    left: 50%;
    width: 2px;
    max-width: 2px;
    height: 50%;
    background: #3e3e3e;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
    height: 0;
    opacity: 0;
    background: #cd575b;
}

.nav-fillpath a::before,
.nav-fillpath .icon-wrap::before {
    top: 50%;
    -webkit-transform: translateX(-50%) rotate(125deg);
    transform: translateX(-50%) rotate(125deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.nav-fillpath a::after,
.nav-fillpath .icon-wrap::after {
    top: 50%;
    -webkit-transform: translateX(-50%) rotate(-125deg);
    transform: translateX(-50%) rotate(-125deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;

}

.nav-fillpath h3 {
    position: relative;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 0.85em;
    text-align: center;
    opacity: 0;
    display: block;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
}

.nav-fillpath a.next h3 {
    text-align: center;
    display: block;
    text-decoration: none;
}

.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
    height: 50%;
}

.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
    -webkit-transform: translateX(-50%) rotate(135deg);
    transform: translateX(-50%) rotate(135deg);
}


.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
    -webkit-transform: translateX(-50%) rotate(-135deg);
    transform: translateX(-50%) rotate(-135deg);
}


.nav-fillpath a:hover h3 {
    opacity: 1;
    -webkit-transform: translateY(-100%) translateX(0%);
    transform: translateY(-100%) translateX(0%);
}

这里是 JSFiddle：

http://jsfiddle.net/74Hzu/

OK 解决方法是删除 display: block;从这里开始

.nav-fillpath .icon-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

这里是固定的 JSFiddle：

http://jsfiddle.net/74Hzu/4/

当我悬停 nav-fillpath 时，后面的部分开始闪烁，但仅在 Internet Explorer 中，chrome 工作正常。知道哪里有问题吗？我设置 -webkit-backface-visibility: hidden; 背面可见性：隐藏；两者都（之前和之后），但它也不起作用

Answer 1

对我来说，将 backface-visibility（css 属性）设置为 visible 就可以了。

Answer 2

为代码中的每个-webkit 添加-ms。

• -webkit（适用于 Webkit 浏览器、Chrome 和 Safari）
• -o（用于 Opera）
• -moz（用于 Firefox）
• -ms（用于 IE）

Demo

更新：

删除display:block;后问题已解决