2011-01-05 6 views
3

일련 번호가 연속해서 표시됩니다. 총알의 애니메이션에서 jQuery와 jQuery UI를 사용하고 있습니다. 최고 총알은 CSS와 PIE.htc를 사용하여 둥근 모서리가 있어야합니다. 이것은 IE8뿐만 아니라 모든 비 IE 브라우저에서 잘 작동하지만, IE7에서는 첫 번째 글 머리가 약 80 %가 좁고 약 95 %가 짧아집니다 (또는 아마도 왼쪽 상단에 상당히 오프셋되어 있습니다).PIE.htc 및 jQuery 애니메이션 충돌?

흥미롭게도 broswer 윈도우의 크기를 조정하면 배경이 적절한 위치에 스냅됩니다 (글 머리 기호가 고정 너비 컨테이너에 있지 않으므로 여기서는 글 머리 기호의 크기를 조정하지 않음). CSS에서 PIE.htc 행을 주석 처리하면 총알이 제대로 표시되지만 둥근 모서리가 필요합니다. this image을 참조하십시오.

관련 코드는

JS

$([appripratebullet]).addClass('currentBullet').fadeIn('slow').prev().removeClass('currentBullet', 'slow'); 

CSS

.bullet 
{ 
display:none; 
color:#6e6e6e; 
min-height:40px; 
font-size:2.5em; 
line-height:1.5em; 
font-weight:normal; 
position:relative; 
padding:25px 20px; 
margin-top:1px; 
background:#eeeeee; 
border-bottom:1px solid #fff; 
} 
.bullet.first{ 
margin-top:0; 
-moz-border-radius:8px 8px 0 0; 
-webkit-border-radius:8px 8px 0 0; 
border-radius:8px 8px 0 0; 
behavior: url(/Content/PIE.htc); 
} 
.bullet.currentBullet{ 
background:#d98452; 
color:#fff; 
} 
+1

하며 .htc devilery 아! 나는 오히려 IE 지원을 떨어 뜨리거나 다른 개발자에게 위임 할 것이다. – Raynos

답변

4

http://jquery.malsup.com/corner/

사용이 jQuery 플러그인을 다음과 모든 브라우저에서 둥근 모서리를 얻으십시오. 코너 이미지가 없으며 중첩 된 dv를 사용하여 테두리를 그립니다. 유연하고 사용하기 쉽습니다. 또한 네이티브 border-radius에 대한 지원을 추가 했으므로 border-radius를 지원하지 않는 브라우저에서만 실행됩니다.

1

효과 후 크기 조정 작업을 수행하기 위해 콜백을 추가하여 요소를 올바르게 다시 그려야합니다.

$([appripratebullet]).addClass('currentBullet') 
        .fadeIn('slow', 
          function() {  
           if ($.browser.msie) { 
            $(this).each(function() { $(this).resize(); }); 
           } 
          }); 
0

나는이 질문은 매우 jquery.corner.js을 old.Even 경우에도 아주 좋습니다,이 문제에 직면하고 이러한 답변 해결할 수없는 사람이 대답을하지만, 사용할 수 없습니다 입력 요소에.

pie.htc 완벽하게 할 수 있습니다 애니메이션 완료 후 간단한 방법을 사용하여 :

function fixButton() { 
    if ((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && document.all) 
     $("body").height("99.9%"); setTimeout(function() { $("body").height("100%"); }, 0); 
}