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/ 

確定的解決方案是刪除顯示：塊;從這裏

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

這裏是固定的jsfiddle：

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

當我徘徊NAV-fillpath部分開始後閃爍，但只在Internet Explorer中，鉻能正常工作。任何想法可能是問題？我設置了-webkit-backface-visibility：hidden; backface-visibility：hidden; （前後），但它也不起作用

Answer 1

在您的代碼中爲每個-webkit添加-ms。

• -webkit（對於Webkit的瀏覽器，瀏覽器和Safari）
• -O（用於Opera）的
• -moz（用於Firefox）
• -MS（對於IE）

Demo

Upate：

問題是消除display:block;

Answer 2

對我來說，backface-visibility（CSS屬性）設置爲visible沒招之後解決。