IE에서 작동하지 않는 CSS 전환

내 CSS에 이상한 문제가 있습니다. 이 코드에는 직사각형 모양의 태그가 포함되어 있으며 마우스를 올리면 흰색 배경이 녹색 텍스트 인 흰색 텍스트에서 흰색 배경이 녹색 텍스트로 바뀝니다. 나는 CSS 변환을 사용하여 전에 이런 종류의 애니메이션을 만들었고 (그래서 IE에서도 작동했다.) 그래서 지금은 왜 작동하지 않는지 완전히 당황 스럽다. 그것은 크롬과 파이어 폭스에서 완벽하게 작동하지만 IE에서는 아무 것도하지 않습니다. 그것은 심지어 색상을 변경하지 않습니다.IE에서 작동하지 않는 CSS 전환

 #wrapper { 
      width: 70%; 
      margin-top: -1%; 
      margin-left: auto; 
      margin-right: auto; 
      min-width: 950px; 
      text-align: center; 
     } 
     #header { 
      padding: 10px; 
      text-align: center; 
      -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5); 
      -moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5); 
      box-shadow:   0px 3px 2px 0px rgba(50, 50, 50, 0.5); 
     } 
     #header img { 
      max-width: 100%; 
     } 

     a { 
      float: left; 
      position: relative; 
      display: inline-block; 
      margin-top: 2%; 
      margin-right: 1.5%; 
      width: 32.3%; 
      padding-top: 5%; 
      padding-bottom: 5%; 
      background-color: #259b24; 
      opacity: 0.8; 
      -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5); 
      -moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.5); 
      box-shadow:   0px 3px 2px 0px rgba(50, 50, 50, 0.5);    
      text-align: center; 
      text-decoration: none; 
      color: white; 
      letter-spacing: 6px; 
      text-transform: uppercase; 
      font-weight: normal; 
      -o-transition: background-color .2s, color .2s; 
      -webkit-transition: background-color .2s, color .2s; 
      -ms-transition: background-color .2s, color .2s; 
      transition: background-color .2s, color .2s; 
      font-size: 20px; 
     } 
     a:hover { 
      background-color: #FFFFFF; 
      color: #259b24; 
     } 
     #right1, #right2 { 
      margin-right: 0; 
     } 
     a::first-line { 
      letter-spacing: 6px; 
      font-size: 40px; 
     }

여기 내 HTML이다 : 어떤 도움을 크게 감상 할 수

<body> 
    <div id="wrapper"> 
     <div id="header"> 
      <img src="logo.png" /> 
     </div> 
     <a href="google.com" id="left1">General<br />Dermatology</a> 
     <a href="google.com" id="middle1">About Us<br />&nbsp;</a> 
     <a href="google.com" id="right1">Cosmetic<br />Dermatology</a> 
     <a href="google.com" id="left2">Patient<br />Resources</a> 
     <a href="google.com" id="middle2">News<br />&nbsp;</a> 
     <a href="google.com" id="right2">Live Chat<br />Contact Us</a> 
    </div> 
</body>

이

여기 내 CSS입니다. 감사!

출처

2014-11-01 Carter Scott Davis

가장 먼저 할 일은 CSS 유효성 확인입니다. http://jigsaw.w3.org/css-validator/ –

질문을 편집하여 IE의 버전을 알려주세요. –

@BobBrown, 그의 CSS는 완벽하게 유효합니다. . . –

http://www.w3schools.com/cssref/css3_pr_transform.asp

시도 추가 -ms을-변환 :? 인라인 블록 :

http://caniuse.com/#search=transform

출처

2014-11-01 20:29:43

문제는 부동 소수점 표시는 다음과 같습니다

CSS의 전환이 9 +만큼이나 오래, IE에서 작동합니까,이 사이트는 브라우저 지원 정보를위한 좋은 자원이다 앵커 요소에있는 속성 전환은 v9 이후 IE에서 작동합니다. 그러나 IE3에서 CSS3과 같은 문제가 발생하면 책에서 제대로 작동 할 것이라고 말하면서 종종 다른 특정 속성 (속성)과 결합하는 경우가 있습니다. 이 상황에서 플로트는 항상 약간 위험합니다. 인라인 블록 속성은 항상 살펴볼 가치가있는 또 다른 속성입니다.

이 경우 모두 {...} CSS 밖으로 가져 가면 전환이 잘 작동합니다 (물론 레이아웃이 물 밖으로 날아갑니다). 나는 그것을 여기에 넣었습니다 : jsfiddle.net/pyz6z9fk/ IE11을 사용하고 있습니다.

그래서 다른 방식으로 레이아웃을 얻거나, IE에서 작동하지 않는 전환으로 살고있는 것처럼 보입니다 (향후 버전). 레이아웃을 멋지게 작동시키기 위해이 디스플레이를 CSS 테이블에 두는 것은 어떻습니까?

출처

2014-11-01 21:48:04 GuyH

흠. 정말 이상 하네! 그래도 고마워. –

IE에서 작동하지 않는 CSS 전환

답변

관련 문제