CSS 효과는 Chrome에서는 작동하지만 IE에서는 작동하지 않습니다.

Chrome에서 잘 돌아가는 내 사이트에 맞춤 CSS 버튼이 있습니다.하지만 Internet Explorer 11은 회전 대신 위에 올려 놓으면 사라집니다.CSS 효과는 Chrome에서는 작동하지만 IE에서는 작동하지 않습니다.

당신은 여기에 버튼을 볼 수는 (그것은 파란색의 버튼 "지금 검색!") : 내 인덱스 파일에서이 줄을 제거하면 크롬 후 IE와 같은 잘못된 효과가 발생합니다 LINK

, 그것 때문에 IE의 문제를 일으키는 것 같아요.

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

솔루션을 제공 할 수 있습니까? 고맙습니다.

출처

2014-12-30 Nova

어떻게 파이어 폭스는 반응 하는가? IE 10/9/8? – lucrativelucas

Internet Explorer를 아무튼 노력 자바 스크립트 CSS의 관련 문제입니다 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

고마워요 조나단, 멋져 보입니다.하지만 내 html 파일에는 다른 href 링크가있어서, 제공 한 CSS가 엉망입니다. 그런 다음 # button1 a, :: before, a :: after {와 같이 모든 'a'앞에 # button1을 놓았습니다. 이제 버튼이 마우스 오버하면 사라집니다. 여기에서 볼 수 있습니다 : http://taskbasket.net/gallery/. 뭐가 문제 야?? CSS 파일은 여기에 있습니다 : http://taskbasket.net/gallery/themes/matheso/style.css – Nova

잠깐, 추가하여 수정했습니다 : # button1 a :: before, # button1 a : hover :: after {마지막 부분으로 CSS의 모두에게 감사드립니다! – Nova

효과를 유지하려면 효과가 보존되어야합니다.

그리고 보존-차원이 다음 버전 그런데

에 계획되어있다하더라도, IE에서 지원되지 않습니다, 그것은 '확인

출처

2014-12-30 17:33:08 vals

그래, 고마워,하지만 IE에서 버튼을 어떻게 다른 애니메이션을 가지고, 그래서 호버에 사라지지 않는가? – Nova

@ 노바 최선의 방법은 preserve-3d가 현재 사용중인 브라우저에서 사용 가능한지 감지하고이를 기반으로 포크 동작을 확인하는 것입니다. [이 질문] (http://stackoverflow.com/questions/24143408/ie9-11-detecting-transform-style-preserve-3d) 당신이 사용할 수있는 괜찮은 예제가 나타납니다. –

CSS 효과는 Chrome에서는 작동하지만 IE에서는 작동하지 않습니다.

답변

관련 문제