CSS效果適用於Chrome瀏覽器，但不適用IE瀏覽器11

我在我的網站上有一個自定義的CSS按鈕，它可以在Chrome中正常旋轉，但Internet Explorer 11在懸停而不是旋轉時會使其消失。CSS效果適用於Chrome瀏覽器，但不適用IE瀏覽器11

你可以在這裏看到按鈕（這是藍色按鈕「立即搜索！」）：LINK

當我從我的索引文件中刪除這一行，Chrome會再產生同樣的錯誤效果IE瀏覽器，所以它讓我覺得這是造成IE的問題。

<script src="http://taskbasket.net/gallery/themes/matheso/js/modernizr.custom.js"></script>

您能否提供解決方案？謝謝。

來源

2014-12-30 Nova

如何Firefox的反應？ IE 10/9/8？ – lucrativelucas

Internet Explorer中沒有按」 t 目前支持preserve-3d，但該團隊在即將發佈的版本中爲working to ship it。這就是說，像你這樣簡單的例子不一定需要這個特性，並且可以用更多的瀏覽器來實現。

我打得有點與獨立兩個僞元素轉換複製你的效果：

enter image description here

<div id="button1"> 
    <!-- Preserved your markup --> 
    <a href="#" data-text="Search Now!"></a> 
</div>

a { 
    position: relative; 
    perspective: 500px; 
} 

a, a::before, a::after { 
    color: #FFF; 
    display: inline-block; 
    line-height: 44px; 
    box-sizing: border-box; 
    width: 155px; height: 44px; 
    backface-visibility: hidden; 
    text-decoration: none; 
    text-align: center; 
} 

a::before, a::after { 
    top: 0; left: 0; 
    position: absolute; 
    content: attr(data-text); 
    transition: transform 1s; 
} 

a::before { 
    background: #0965A0; 
    transform-origin: 50% 100%; 
} 

a::after { 
    background: #2195DE; 
    transform-origin: 50% 0%; 
    transform: translateY(100%) rotateX(-90deg); 
} 

a:hover::before { 
    transform: translateY(-100%) rotateX(90deg); 
} 

a::before, a:hover::after { 
    transform: translateY(0) rotateX(0); 
}

小提琴：http://jsfiddle.net/jonathansampson/ybjv8d7x/

來源

2014-12-30 18:40:21 Sampson

感謝Jonathan，這看起來很棒，但是我的html文件中還有其他href鏈接，所以你提供的CSS會搞砸了。然後我把＃button1放在每個'a'的前面，比如＃button1 a，a :: before，a :: after {但是現在該按鈕在懸停時消失。你可以在這裏看到：http://taskbasket.net/gallery/。怎麼了？？ CSS文件在這裏：http：//taskbasket.net/gallery/themes/matheso/style.css – Nova

等等，我通過添加：＃button1 a :: before，＃button1 a：hover :: after {到最後部分的CSS。感謝大家！ – Nova

您的影響需要保留-3D才能正常工作。

，並保留-3D不支持IE，即使它在下一版本

順便提一下計劃，這是一個CSS相關的問題，JavaScript是工作確定

來源

2014-12-30 17:33:08 vals

好的謝謝，但我如何使IE中的按鈕有不同的動畫，以便它不會消失懸停？ – Nova

@Nova你最好的選擇是檢測你正在使用的瀏覽器中是否存在preserve-3d，以及基於此行爲的fork行爲。 [這個問題]（http://stackoverflow.com/questions/24143408/ie9-11-detecting-transform-style-preserve-3d）似乎有一個體面的例子，你可以使用。 –

CSS效果適用於Chrome瀏覽器，但不適用IE瀏覽器11

回答

相關問題