jQuery .load() - IE에서 작동하지 않는 코너 플러그인 - Firefox가 괜찮습니다.

테스트 용으로 두 개의 간단한 페이지가 있습니다.jQuery .load() - IE에서 작동하지 않는 코너 플러그인 - Firefox가 괜찮습니다.

첫 번째 페이지에서 $.load()을 사용하여 두 번째 페이지에서 div을로드합니다.

두 페이지 모두 코너링 할 플러그인이 포함되어 있습니다. 두 번째 페이지에서 div를로드하는 첫 번째 페이지를로드하면 코너링이 작동하지 않습니다. 그러나 두 번째 페이지를 직접로드하면 코너링이 작동하므로 $ .load()와 관련이 있습니다. 여기

1 페이지에서 일부 코드입니다 :

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title>Untitled Page</title> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#load").load('testLoadCornering2.aspx #loadMe'); 
      }); 
     </script> 

     <script src="resources/js/curvycorners.js" type="text/javascript"></script> 

     <script src="resources/js/curvycorners.src.js" type="text/javascript"></script> 

     <link href="resources/css/main.css" rel="stylesheet" type="text/css" /> 
     <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" /> 
     <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
     <div id="load" class="BWTable"> 
     </div> 
     </form> 
    </body> 
    </html>

당신은 페이지가 두 번째 DIV를로드하려고 참조하십시오.

그리고 두 번째 페이지 :

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

    <script src="resources/js/curvycorners.js" type="text/javascript"></script> 

    <script src="resources/js/curvycorners.src.js" type="text/javascript"></script> 

    <link href="resources/css/main.css" rel="stylesheet" type="text/css" /> 
    <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" /> 
    <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="loadMe" class="BWTable"> 
     <p> 
      Test Test Test Test Test Test Test 
     </p> 
    </div> 
    </form> 
</body> 
</html>

그리고 그것은 (플러그인 둥근 모서리와 함께) 반올림에 사용하는 CSS :

파이어 폭스에서

background-image: url(  '../../images/wp_form2.gif'); 
border: solid 1px #000000; 
margin-left: auto; 
margin-right: auto; 
text-align: center; 
color: white; 
-moz-border-radius: 10px; /* Rounded corners plugin */ 
-webkit-border-radius: 10px; /* Rounded corners plugin */

, 이것은 잘 작동 -하지만 IE에서 (특별히 시도한 버전 8) 모서리는 절대로 둥글 지 않습니다.

다시 말하면 수동으로 IE 8 모서리의 두 번째 페이지로 이동하는 것은 .load() 메서드가 사용 된 경우에만 해당됩니다.

도움을 주시면 감사하겠습니다.

참고 : 두 페이지에 스타일 시트를 추가 할 필요가 없다는 것을 알고 있습니다. 첫 페이지에서로드해야하기 때문에 스타일 시트를 추가 할 필요는 없지만 시도한 내용의 전체 코드를 보여주기 위해 추가했습니다. 할 것. 감사합니다, 리키

출처

2011-01-19 Ricky

박스 모델 대신 국경의 사용이 될 수는 그래서 파이어 폭스와 크롬에서와 동일 국경 반경 등의 작업 모습입니다 수 있습니다. –

이것은 이제 해결되었으며 내 대답을 게시했습니다. 모두에게 감사드립니다. – Ricky

고맙습니다. 나사로. 당신은 나를 올바른 길 위에 올려 놓았고 해결책을 찾았습니다. 나는 지금 바보 같은 느낌이 든다!

다시 한번 감사드립니다.

페이지 1 :

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

    <link href="resources/css/main.css" rel="stylesheet" type="text/css" /> 
    <link href="resources/css/buttons.css" rel="stylesheet" type="text/css" /> 
    <link href="resources/css/confirm.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

     $("#load").load('testLoadCornering2.aspx #loadMe'); 

      $.getScript('resources/js/curvycorners.js', function() { 
       $(this).init(); 
      }); 
      $.getScript('resources/js/curvycorners.src.js', function() { 
       $(this).init(); 
      });   
     }); 
    </script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="load" class="BWTable"> 
    </div> 
    </form> 
</body> 
</html>

2 페이지 :

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="loadMe" class="BWTable"> 
     <p> 
      Test Test Test Test Test Test Test 
     </p> 
    </div> 

    </form> 
</body> 
</html>

출처

2011-01-19 12:35:07 Ricky

바보 같이 느낄 필요는 없습니다. 우리는 모두 거기에있었습니다. 해결책을보기에는 문제에 너무 가까워지기 쉽습니다. "나무를 나무로 볼 수 없다"는 표현이 가장 좋은 표현입니다. 잠시 후 2 시간 동안 코드를 샅샅이 뒤지고 따로 따로 골라서 버그를 찾기 위해 종이에서 실행하려고하면 동료가 어깨 너머로 기울고 화면을 바라 보면서 ** the * * 당신이 상상할 수있는 가장 명백한 버그. :) – Lazarus

답변을 수락하는 것을 잊지 마세요. 귀하의 답변이기는하지만 답변입니다. – Lazarus

여기서 문제는 파이어 폭스가 완전히 파이어 폭스에서 작동하고있는 동안 curvycorners 아무것도 할 시도하지 않기 때문에, 그 만의 있도록 CSS3가 둥근 모서리 지원하는 curvycorners는 IE의 삶으로 봄 것입니다.

귀하의 JQuery로드는 문서 준비 블록 내에 배치되므로 자바 스크립트를 포함하여 전체 페이지가로드 될 때까지 실행되지 않으므로 두 번째 페이지 div가로드되기 전에 curvycorners가 실행됩니다. 두 번째 페이지 div 뒤에 curvycorners 스크립트를로드하거나 두 번째 페이지 div가로드 된 후 페이지를 다시 채우도록 curvycorners를 호출하는 방법을 찾아야합니다. curvycorners 문서에서

은 :

당신이 redrawable 요소의 일부 속성 또는 스타일을 변경해야하는 경우
, 이는 DOM을 통해 직접 수행 할 수 없습니다. 대신 을 사용하여 DOM 개체를 식별해야합니다 (예 : 문서).에서 getElementById()) 호출

curvyCorners.adjust(DOMObj, propertyName, newValue);

:

DOMObj가 변경할 필요 curvyRedraw 클래스 이름을 가진 요소 객체이고;
propertyName은 앞에 점이없는 속성 의 이름입니다. 이 스타일 속성 인 경우이 'style.property'로 표시되어야합니다.
newValue는 새 값입니다 (예 : '없음'

curvyCorners.adjust()은 위의 에 설명 된 세 가지 매개 변수를 모두 사용해야합니다. 유용한 값을 반환하지 않습니다.

출처

2011-01-19 12:22:17 Lazarus

나사로에게 감사드립니다. 이것은 나를 올바른 길로 인도한다. 나는 나를 위해 일한 것에 대한 해답을 게시했다. – Ricky

jQuery .load() - IE에서 작동하지 않는 코너 플러그인 - Firefox가 괜찮습니다.

답변

관련 문제