IE에서 전환이 작동하지 않습니다.

저는 자체 웹 사이트를 개발하고 있는데, 그 중 '기능'중 하나는 헤더 위로 마우스를 가져 가면 아래로 내려갑니다.IE에서 전환이 작동하지 않습니다.

모든 주요 브라우저에서 잘 작동합니다. 그러나 IE 10에서는 그렇지 않습니다.

<?php 
    echo "<html> 
    <head> 
     <title>memodesigns</title> 
     <link rel='stylesheet' href='style/stylesheet.css'> 
    </head> 

    <body>"; 
       include_once('modules/header.php'); 
      echo " 
    </body> 

    </html>"; 
?>

이 포함 된 헤더 파일은 다음과 같습니다 : 다음 페이지 소스의

<?php 

    echo "<div id = 'menucontainer'> 
      <div id = 'menu'> 
       <p> 
        <ul> 
         <li><a class = 'menu' href = ''>HOME</a></li> 
         <li><a class = 'menu' href = 'about.php'>ABOUT</a></li> 
         <li><a class = 'menu' href = 'portfolio.php'>PORTFOLIO</a></li> 
         <li><a class = 'menu' href = 'rates.php'>RATES</a></li> 
         <li><a class = 'menu' href = 'contact.php'>CONTACT</a></li> 
        </ul> 
       </p> 
      </div> 
     </div>"; 

?>

그리고 CSS 스타일은 여기에 사용되는 :

a.menu{ 
    padding-left: 20px; 
    padding-right: 20px; 
} 

/*menucontainer*/ 
#menucontainer{ 
    position: absolute; 
    margin-top: -8px; 
    top: 0px; 
    width: 100%; 
    text-align: center; 
    -webkit-transition: margin-top 0.5s; 
    -moz-transition: margin-top 0.5s; 
    -o-transition: margin-top 0.5s; 
    transition: margin-top 0.5s; 
} 

/*menucontainer*/ 
#menucontainer:hover{ 
    margin-top: 0px; 
} 

/*menu*/ 
#menu{ 
    padding-top: 5px; 
    margin-left: auto; 
    margin-right: auto; 
    border-bottom-left-radius: 12px; 
    border-bottom-right-radius: 12px; 
    -moz-border-radius-bottomleft: 12px; 
    -moz-border-radius-bottomright: 12px; 
    max-width: 75%; 
    height: 25px; 
    background-color: #202020; 
    font-family: Roboto; 
    color: #f3f4f4; 
    font-size: 16px; 
}

는 이유에 어떤 도움을 주셔서 감사합니다겠습니까 전환은 IE에서는 작동하지 않지만 다른 주요 브라우저에서는 작동합니다.

출처

2013-07-09 MemoNick

에 오신 것을 환영합니다. 당신은 당신의 체류를 즐기지 않을 것입니다. –

내가 그런 것처럼 uknown 사이트에 링크하지 않는 것이 좋습니다. jsbin 또는 jsfiddle 또는 비슷한 것을 시도하십시오. –

@DMoses 페이지가 깨끗합니다. 또한, 다른 메모에서, 나는 이것을 BrowserStack을 사용하는 Windows 7의 IE 10에서 확인했습니다. –

호환성 모드 일 수 있습니다.

문서의 첫 번째 줄로 적절한 doctype 선언이없는 경우 IE는 호환 모드로 전환되며 대부분의 기능이 예상대로 작동하지 않습니다. 올바른 doctype (<!DOCTYPE html>이 유효 함)을 확인하고 문서 <head>에 <meta http-equiv="X-UA-Compatible" content="IE=edge" />을 추가하십시오.

또한 PHP에서 텍스트를 에코 방식으로 소개 할 수있는 doctype 앞에 공백이 없어야합니다.

출처

2013-07-09 21:30:50 nullability

Dang it , 나는 그것을 쓰고 있었다! D : –

Nope - 행운 :/ – MemoNick

예, IE10은 표준 속성을 지원해야합니다. 문제는 호환성 모드라고 생각합니다. – nullability

-ms- 공급 업체 프리픽스를 사용해 보셨습니까? 이 문제를 해결할 지 모르겠다. :)

의견을 볼 때 JSFiddle이 normalize.css와 같은 페이지에 뭔가를 추가하고 있다고 생각합니다.

출처

2013-07-09 21:31:11

Nope - 행운을 빈다 :/ – MemoNick

주어진 예제에는 doctype이 전혀 없습니다. 유효한 doctype이 없으면 버전의 IE가 효과적으로 IE5.5로 바뀝니다.

또한 HTML/CSS/자바 스크립트 문제를 디버깅 할 때 PHP를 잊어 버리십시오. 브라우저는 마크 업이 생성되는 것에 신경 쓰지 않고 '소스보기'메뉴를 클릭하면 볼 수있는 결과 HTML 코드 만 볼 수 있습니다.

출처

2013-07-09 21:52:32

그만큼 (re : PHP). 사실을 말하면, 전적으로 은 Doctype에 대해을 잊어 버렸습니다. 고마워요! :) – MemoNick

jquery와 같은 js 솔루션을 사용해 보셨나요? 이 같은 뭔가 작동 할 수 있습니다 :

여기

$("#menu").mouseenter(
    function(){ 
     $(this).stop().animate({paddingTop:'20px'},'slow') 
    }); 
$("#menu").mouseleave(
    function(e) { 
     $(this).stop().animate({paddingTop:'5px'},'slow') 
    });

Internet Explorer로 바이올린을 http://jsfiddle.net/Bobyo/aXgAV/

출처

2013-07-09 22:04:44

이 솔루션이 더 쉽고/더 실현 가능합니까? CSS 솔루션이 마음에 들었습니다. 나는 전환이 IE 9에서 작동하지 않는다는 것을 알고 있지만, 솔직히 IE에 대해서는별로 신경 쓰지 않습니다. – MemoNick

IE9 이하에 신경 쓰지 않는다면 CSS를 사용하는 것이 더 좋습니다. 내가 peresonaly js에 의해 내 애니메이션을 가지고 싶지만 CSS는 멋지고 깨끗한 솔루션입니다 당신이 상관 xbrowser 호환성에 대한 관심 donn't –

답변

관련 문제