jQuery + Superfish + Supersubs + Prototype + IE = FAIL!

jQuery 용 Superfish 메뉴 플러그인을 사용하여 일부 페이지에 수직 메뉴를 표시하고 있습니다. 또한 Supersubs.js 플러그인을 사용하여 메뉴 시스템의 각 레벨이 가장 넓은 LI 요소만큼 넓은 지 확인합니다.jQuery + Superfish + Supersubs + Prototype + IE = FAIL!

다운로드 zip 파일에 포함되어있는 EXAMPLE.HTML 파일을 가져 와서 원본에 prototype.js 라이브러리를 추가하기 만했습니다.

FF로 예상되는 Chrome, Safari는 모두 메뉴를 올바르게 렌더링하고 supersubs 플러그인을 사용하여 메뉴의 각 수준이 가장 넓은 요소와 동일한 지 확인합니다.

그리고 IE가 .....

는 즉시이 페이지에서하여 Prototype.js 라이브러리를 포함로 IE는 Supersubs 플러그인을 무시합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <title>A very basic Superfish menu example</title> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="css/superfish-vertical.css" media="screen" /> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script> 
    <script type="text/javascript" src="js/hoverIntent.js"></script> 
    <script type="text/javascript" src="js/superfish.js"></script> 
    <script type="text/javascript" src="js/supersubs.js"></script> 
    <script type="text/javascript"> 

     //jQuery.noConflict(); 

    // initialise plugins 
     jQuery(function() { 
      jQuery('ul.sf-menu').supersubs({ 
       minWidth: 12, 
       maxWidth: 30, 
       extraWidth: 2 
      }).superfish(); 
     }); 

    </script> 
</head> 
<body> 
    <ul class="sf-menu sf-vertical"> 
     <li class="current"> 
      <a href="#a">menu item</a> 
      <ul> 
       <li> 
        <a href="#aa">menu item that is quite long</a> 
       </li> 
       <li class="current"> 
        <a href="#ab">menu item</a> 
        <ul> 
         <li class="current"><a href="#">menu item</a></li> 
         <li><a href="#aba">menu item</a></li> 
         <li><a href="#abb">menu item</a></li> 
         <li><a href="#abc">menu item</a></li> 
         <li><a href="#abd">menu item</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">menu item</a> 
        <ul> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">menu item</a> 
        <ul> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">menu item</a> 
     </li> 
     <li> 
      <a href="#">menu item</a> 
      <ul> 
       <li> 
        <a href="#">menu item</a> 
        <ul> 
         <li><a href="#">short</a></li> 
         <li><a href="#">short</a></li> 
         <li><a href="#">short</a></li> 
         <li><a href="#">short</a></li> 
         <li><a href="#">short</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">menu item</a> 
        <ul> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">menu item</a> 
        <ul> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">menu item</a> 
        <ul> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">menu item</a> 
        <ul> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
         <li><a href="#">menu item</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">menu item</a> 
     </li> 
    </ul> 

</body> 
</html>

내가 jQuery.noConflict을 시도() : 여기

은 example.html 소스입니다. 필자는 (function ($) {}) (jQuery) 형식을 사용하더라도 $ 대신 jQuery를 사용하도록 플러그인 파일의 소스를 변경했습니다. 그건 중요하지 않아.

아무도 도와 드릴 수 있습니까? 내 머리카락을 꺼내려고.

미리 감사드립니다. 클래스 이름이나 IDS와 같은 변수 이름이 플러그인 내에서 인스턴스에 대한

출처

2010-03-03 Daniel P

봐 같은

menu = $('#menu');

대신이 마십시오

var menu = $('#menu');

이의 샷 어두운하지만 때마다 Prototype.js를 사용할 때 IE 용 버그가 있습니다.

출처

2010-03-03 23:49:05 Minimul

안녕하세요. 답장을 보내 주셔서 감사합니다. 나는 그것을 들여다 볼 것이다. Prototype 라이브러리에있는 뭔가가 IE8을 quirks 모드 등으로 만드는 것으로 보인다. 내가 언급 한 모든 자바 스크립트 파일이 함께 나타나면 "호환성 모드"버튼이 사라집니다. IE8에서 개발자 도구 모음을 사용하고 브라우저를 IE7 렌더링 모드로 설정하면 예상대로 모든 것이 작동합니다. 오류 없음. 다시 IE8 렌더링 모드와 기쁨에 넣었습니다. 완전히 좌절하고있다. –

IE 개발자 도구 (F12 키)에서 페이지가 어떤 모드인지 확인할 수 있습니다. 페이지가 새로 고침되고 "이 페이지의 문제로 인해 호환성보기로 새로 고침이 발생했습니다"라는 풍선이 나타나면 IE8 표준 모드에서 페이지를 유지하기 위해 노력해야 할 "하드 어썰트"(IE 레이아웃 코드의 버그)가 실제로 발생했습니다. – EricLaw

jQuery + Superfish + Supersubs + Prototype + IE = FAIL!

답변

관련 문제