2008-10-20 3 views
7

엉망, 당신은을 열 경우 그들은JQuery와 둥근 모서리 (IE)는 좀 TD 태그에 둥근 모서리를 만들 jQuery의 jquery.corner.js을 사용하고

  1. 를 제외하고 IE에서 잘 볼 새 탭을 클릭 한 다음 페이지로 다시 돌아온다
  2. 다른 탭으로 이동하면 링크를 클릭 한 다음 javacript-execution div/menu (내가 생각하는 것) 위에 마우스를 가져 가면
  3. 페이지로 돌아올 수 있습니다.

둥근 모서리가 수평선으로 바뀌고 td 태그 내의 텍스트가 아래로 밀려납니다. 그러나 페이지가 새로 고쳐지면 렌더링이 정상으로 돌아갑니다. 모든 경우에 Firefox에서 완벽하게 작동합니다.

아이디어가 있으십니까? 다음과 같이

이 참고로, 내가 사용 자바 스크립트 코드는 (그것은 MOSS 2007 페이지 것) :

<html> 
    <head> 
     <script type="text/javascript" src="jquery-1.2.6.js"></script> 
     <script type="text/javascript" src="jquery.corner.js"></script> 
     <script type="text/javascript"> 
      <!-- 

      $(document).ready(function() 
      { 
       $("div").corner("top"); 
       $("td").corner(); 
      }); 

      //--> 
     </script> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td style="background-color: blue"> 
        TD that will be messed up. 
       </td> 
      </tr> 
     </table> 
     <div style="background-color: green"> 
      divs don't get messed up. 
     </div> 
    </body> 
</html> 

: 여기

$(document).ready(function(){ 
    $("table.ms-navheader td").corner("top"); 
}); 

완벽하게 문제를 표시하는 샘플 HTML 페이지입니다 위의 코드에서 TD는 새 탭을 열었을 때 엉망이되지만 div가 아닙니다. 나는 MOSS가 방출 한 HTML에 대해 많은 통제권을 가지고 있지 않다. 그렇지 않으면 나는 총알을 물리쳐 테이블 대신 DIV를 사용했을 것이다.

+0

여러 개의 jquery.corner.js 플러그인이 있습니다. 당신이 사용하고있는 링크가 도움이 될 것입니다. :) –

답변

2

나는 이미지를 포함하는 전통적인 접근 방식에 복귀 한 끝에서 (특히 IE6와 7) 둥근 모서리 자바 스크립트 라이브러리에 문제가 아무것도

을 했어. 좀 더 많은 잡무를하고 있지만 완벽하게 작동합니다.

0

당신이 가진 이슈를 시각화하는 것은 약간 어렵습니다. 링크가 도움이 될 것입니다. 높이와 너비 속성이 테이블의 각 셀에 정의되어 있는지 확인하십시오. 잠재적으로 hasLayout 문제 일 수 있습니다.

4

RichH에 동의합니다. 저는 모든 인기있는 JavaScript 라이브러리가 둥근 모서리를 만들려고 할 때 원하는 것을 남겨두고 있다고 생각합니다.

나는 항상 자신이 cornershop을 사용하고 있음을 발견했다 : http://wigflip.com/cornershop/, 그것은 둥근 모서리를 수동으로 만드는 고통을 제거하는 이미지/CSS 생성기이다.

+0

개인적으로 CSS 속성을 지원하지 않는 브라우저의 둥근 모서리를 만드는 데 필요한 여분의 이미지, 태그, CSS 또는 기타 항목을 추가하지 않아서 기쁩니다. 차라리 둥근 모서리가 없을 때 (대부분의 경우) 지원되지 않을 것입니다. –

3

jquery.curvycorners.js 대신이 플러그인을 사용해 볼 수도 있습니다.

우리 프로젝트에 전혀 문제없이 사용합니다. 스팬을 추가하거나 추가해야 할 수도 있지만 매우 간단합니다.

기본 정보 -> 앤티 앨리어스입니다.

http://blue-anvil.com/jquerycurvycorners/test.html

+0

이 것은 훌륭합니다. 다른 플러그인에도 문제가있었습니다. –

+1

작동하지만 IE8에서 충돌! –

0

내가 검색 한 및 JQuery와 UI 탭의 둥근 모서리에 대한 해결책을 발견하지 않았습니다. jquery 테마 렌더러는 둥근 모서리를 지원하지만 문서에서는 IE에서 작동하지 않는다고 말합니다.여기

내가 발견, 심지어 파이어 폭스에서 비슷한 문제를 했어 http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

0

25 개 가지 둥근 모서리 방법과 좋은 페이지입니다 당신은 설정하는 클래스를 가진 요소에 '코너'를 적용하는 경우 모퉁이에 배경색이 적용되지 않습니다. 내 경우에는 'selected'라는 클래스를 추가하여 UL에서 선택한 '탭'에 다른 배경색을 부여합니다. 나는 모서리를 추가 한 후이를 방지하기 위해 내가 대신 CSS의 JS를 사용하여 배경 색상을 적용

$('.selected').css('background-color', '#3296C0'); 

은 또한 당신이 추가 : 모서리가 가져가 다시 해제 제곱 된 배경 색상을 변경하는 맴 돕니 다. 내가 지금까지 가지고있는 해결책은 모서리를 다시 적용하는 onhover 이벤트를 사용하는 것입니다 (색상을 설정할 수도 있습니다). 악몽 - - IE6에 관해서는

$('#top-nav li a').hover(function(){ 
     $(this).corners('top'); 
    }); 

나는 IE6를 감지하고 그냥 제곱 떠나 코너를 추가 할 수 있다면 그렇게 나쁘지 않을 것입니다. 아직 IE 7을 사용해 보지 못했습니다 ...

5

IE에서 나는 DD_Roundies 라이브러리로 더 좋은 결과를 얻었습니다. 그래도 IE에서 작동합니다. Firefox의 경우 -moz-border-radius 스타일을 추가해야합니다.

+0

Firefox/Webkit에 아무 것도 추가 할 필요가 없으며 스크립트 자체가 추가됩니다. 브라우저 간 작동 – vsync

+0

CSS에서 수행하는 경우 JavaScript가 비활성화 된 경우에도 작동합니다. –

+1

이것은 멀리까지 잘 작동합니다. 다른 모든 것들은 그다지 옳지 않은 작은 질소를 가지고있었습니다. – knowncitizen

2

curvycorners.js 및 jquery.curvycorners.js는 전환을 사용하지 않으려는 경우에만 작동합니다.

아코디언 또는 페이드 인/아웃 탭 효과가있는 경우 둥근 모서리가있는 요소는 변경 후에 올바르게 렌더링되지 않습니다.

1

IE에서 jquery curvy corner가 작동하도록하려면 요소에 배경색을 지정하면됩니다. 그 이유는 확실하지 않습니다 ... 단지 마법처럼 작동합니다!