jquery cycle IE7 투명 png 문제
IE7에 투명 png 파일이 있을 때 jquery cycle이 작동하는 데 문제가 있습니다.
파이어폭스와 크롬에서는 괜찮지만 IE(버전 7)에서는 페이드 중에 png 투명도가 있는 검은색이 나옵니다.
이것이 제대로 작동할 수 있을까요?
안타깝게도 IE7이 투명 PNG를 지원하지만 한 번에 하나의 요소에만 필터를 적용할 수 있습니다.
응용 프로그램에서 발생하는 일은 IE7이 알파 필터를 PNG에 적용하고 있는 경우이며, jQuery는 페이드에 대해 다른 알파 필터를 적용하라는 메시지를 표시합니다.이것은 당신이 말한 것처럼 가시적인 결과를 가지고 있습니다.
이것을 피하는 방법은 용기 안에 PNG를 넣은 다음 용기를 페이드하는 것입니다.이런 식입니다.
<div id="fadeMe">
<img src="transparent.png" alt="" />
</div>
이 문제를 해결하는 또 다른 방법은 제가 구조를 바꿀 수 없었기 때문에 사용했던 간단한 jQuery 플러그인입니다.귀인을 하고 싶지만 솔직히 어디서 찾았는지 기억이 안 나요.
/* IE PNG fix multiple filters */
(function ($) {
if (!$) return;
$.fn.extend({
fixPNG: function(sizingMethod, forceBG) {
if (!($.browser.msie)) return this;
var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes here
sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
this.each(function() {
var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
if (isImg) this.src = emptyimg;
else this.style.backgroundImage = "url(" + emptyimg + ")";
});
return this;
}
});
})(jQuery);
참고 원래 플러그인은 IE6에서 PNG 투명성을 수정하기 위해 작성되었지만 IE6+에서 당신의 문제와 함께 작동하도록 수정했습니다.
참고 사항:나는 머리에서 떠나지 않지만 IE8도 같은 문제를 가지고 있을 것이라고 생각합니다.제가 틀렸다면 고쳐주세요 :)
이것 때문에 지난 며칠 동안 화가 났어요!마침내 꽤 잘 작동하는 괜찮은 해결책을 찾았습니다.
CSS에 추가:
img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}크레딧: 댄 텔로
추가 시도
cleartype: true, cleartypeNoBg: true
당신의 사이클 재쿼리 논쟁에.지금은 괜찮을 겁니다 :)
앞에서 언급한 "div에서 이미지 랩/div 페이드" 전술과 결합하여, 이 CSS 라인을 사용하면 IE 문제를 해결할 수 있습니다.
#divimg{필터: 프로그리드:DX 이미지 변환.마이크로소프트.AlphaImageLoader(src='../tro/intro_ph1.png';}저는 jQuery의 .animate() 함수에 빈 값을 가진 필터 속성을 포함하는 것만으로 작동했습니다.
아마 이것도 당신에게 효과가 있을 것입니다.
$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});
Internet Explorer 7(인터넷 익스플로러 7)에서 투명 PNG가 페이딩되는 데 몇 가지 문제가 있습니다.PNG의 투명한 가장자리가 있는 검은색 테두리가 보이기 때문에 이 페이지로 이동한 경우 문제를 해결하기 위한 몇 가지 팁이 있습니다.
- 요소를 직접 페이드하지 말고 PNG를 고정하는 상위 컨테이너를 페이드합니다.따라서 코드에 래퍼 요소를 추가해야 할 수 있습니다.
- 부모 요소에 배경색을 지정합니다.
- 마지막으로, 만약 여러분이 여전히 문제를 가지고 있다면, 여러분의 부모님 요소를 오래된 것으로 해보세요.
zoom: 1소 에 제 합 니 을 다 언 선 타 일 니 ▁declar ation ▁trickzoom: 1(CSS 또는 인라인 스타일을 통해).이렇게 하면 IE가 요소를 제공합니다.hasLayoutIE에서 모든 종류의 이상한 디스플레이 문제를 해결하는 경향이 있습니다.
안타깝게도 전환이 원활하게 진행되려면 부모 요소에 배경색을 적용해야 하기 때문에 검은색 픽셀 없이 투명 PNG를 투명 배경에서 페이딩하는 것은 불가능합니다.background: transparent않을 입니다.transparent실제로는 색깔이 아닙니다.) :(
DOM에 동적으로 PNG를 로드하고 있습니다. http://www.twinhelix.com/css/iepngfix/ 에서 도움이 되었습니다.
투명 PNG에서 페이드 전환을 사용하는 Drupal Views 슬라이드쇼에서 이 문제가 있었습니다.
저는 완전히 우연히 다음과 같은 유사한 해결책을 발견했습니다.왜 작동하는지는 모르겠지만, 단점은 IE에서 크로스페이드 엔벨로프를 근본적으로 제거한다는 것입니다(FF 또는 Safari에 눈에 띄게 영향을 미치지 않는 것으로 보입니다).
보기 슬라이드쇼는 출력의 일부로 다음과 같은 것을 인쇄합니다.
<div class="views-field-field-photo-fid">
<span class="field-content"><img height="433" width="834" src="http://devel.acupuncture2.polishyourimage.com/sites/acupuncture2.polishyourimage.com/files/pain_splash.png?1292552784" alt="" class="imagefield imagefield-field_photo"></span>
</div>
뷰-필드-필드-포토-피드를 숨겼습니다.
.views-field-field-photo-fid { width: 0px; }
완벽하지는 않지만 더 나은 해결책을 찾을 때까지 충분히 좋을 수도 있습니다.개발 사이트를 보실 수 있습니다. http://acupuncture2.polishyourimage.com/
저도 Weezy의 솔루션을 사용하고 있지만 IE7을 잘 다루지 못합니다.그 영향은 훨씬 더 심각합니다.
Black-Border-Bug 대신 animate-function에 jQuery opcity-property를 할당하면 Black&이 생성됩니다.White-Border-Bug :-P 그래서 IE8에 대해 다음을 수행했습니다;
IE8 머리글에서 특히 htc에 대한 class.fixpng에 대한 HTC 동작과 함께 조건부 주석을 달았습니다.
<!--[if IE 8]>
<style type="text/css">
.fixpng {
/* this fixes transparency in IE8 ONLY! */
behavior: url(css/IE8pngfix.htc);
}
</style>
<![endif]-->
HTC 파일이 IE8pngfix.htc로 변경되었습니다..htc에서 75행을 다음과 같이 변경했습니다.
!/MSIE (8)/.test(Navigator.userAgent)
사실 처음에는 IE 조건부로, 그 다음에는 htc에서 이중 필터를 사용하지만, 도대체 뭐야!
저는 htc가 jQuery를 방해할 수 있기 때문에 그것을 발견했습니다.예;
[divid="tooltip" 클래스="fixpng"]
$(div#tooltip).css({opacity: 0})를 CSS에서 표시: 없음으로 변경하고 표시: 'block'을 호버 이벤트에서 설정해야 합니다.
따라서 IE7을 위한 해결책을 찾은 사람이 있다면 정말 기쁠 것입니다.위의 모든 해결 방법은 저에게 적용되지 않습니다.IE6에 대해 저는 조금도 개의치 않습니다.
그래서 디브에 대한 Darko Z 제안을 받았습니다.결국 이것이 제가 해야 할 일입니다. jQuery Cycler 페이드화 FX를 drupal 7과 함께 IE에서 작업할 수 있게 하기 위해서입니다.태그를 다는 대신 divs를 사용했고 이미지의 배경에 .png을 적용했습니다.
그래서 이걸 바꿨습니다.
<div class="fademe">
<a href="http://mysite/node/1">
<img class="firstTAB-phase2" src="http://mysite/IMG/bio_640x330.png" height="330px" width="640px" />
</a>
대상:
<a href="http://mysite/node/1">
<div class="fademe" id="TAB1"></div>
</a>
그리고 나서 나는 CSS로 했습니다:
.fademe{ width:640px; height:330px;}
#TAB1{ background: #999 url(http://mysite/IMG/bio_640x330.png) no-repeat;}
그리고 지금은 작동합니다 =D.
도움이 되길 바래, 데피고
페이딩이나 다른 jQuery 효과를 사용할 때 이 망할 IE-PNG-Black Border 문제에 대한 궁극적인 해결책을 가지고 있습니다.IE8에서도 6 이상의 모든 IE에서 작동합니다!:
http://jquery.andreaseberhard.de/pngFix/ 에서 jQuery의 pngFix를 다운로드하십시오.
다음을하여 이 합니다.
if (jQuery.browser.msie && (ie55 || ie6)) {과 같이 대체합니다.if (jQuery.browser.msie) {blank.gif 생성(1x1 투명 gif)
put a:
.pngFix( {blankgif: '< relative location to the blank.gif >'} );: jQuery 효를는줄예하의끝표에다니시됩행)를 수행하는 에서.$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );DOM-Element 창에서 .load 이벤트를 사용하여 문서 준비 기능 내에서 jQuery 효과를 사용하기 전에 모든 사진이 로드되었는지 확인합니다.
$(document).ready( function() {
$(window).load( function() {
$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500).pngFix( {blankgif: './library/img/blank.gif'} );
});
});IE8의 페이지를 로드하고 행복을 느껴보세요 ;-)
IE의 일부 애니메이션 PNG 주변에는 더 이상 추악한 어두운 경계가 없습니다.
저는 이 버그에 대한 수정 사항을 발견했습니다. 단순히 래핑 디브와 img 및 기타 요소(예: h1,h2,p)에 다음을 추가합니다.
#div, #div img {
background:none !important;
filter:none !important;
}
이것으로 해결할 수 있습니다.
이것은 저를 며칠 동안 미치게 했고 마침내 저는 유닛의 PNG 수정을 우연히 발견했습니다. http://labs.unitinteractive.com/unitpngfix.php - Cycle과 협력하여 JPEG 솔루션으로 전환하는 것을 막았습니다!
사이클 디브에서 특정 PNG를 목표로 하려면 약간의 수정이 필요하지만, 그녀는 작동합니다!
이 문제에 직면한 다른 사람을 돕기를 희망합니다.
제 페이지에 몇 개의 div에 투명한 .png 배경(타일링)이 있었는데 jquery cycle plugin을 활성화하자 투명한 영역이 엉망이 되었습니다.그들은 투명성의 일부를 잃었습니다.
제 해결책은 단순히 타일을 훨씬 더 크게 만드는 것이었습니다. 그래서 타일은 전혀 없습니다.파일 크기에 대한 약간의 절충이 있지만 문제를 해결했습니다.
fadeIn 메서드와 fadeOut 메서드를 다시 작성했습니다.PNG 이미지에 검은색이 안 보이는 것 같습니다.상위 div는 필요하지 않습니다.여전히 jQuery로 사용하고 있습니다.
http://www.pagecolumn.com/javascript/fade.htm
약간의 이미지 품질을 희생할 수 있는 경우 이미지를 PNG-24 대신 PNG-8로 저장한 다음 Prosini에서 언급한 수정 사항을 적용할 수 있습니다.
cleartype: true, cleartypeNoBg: true
그게 효과가 있을 겁니다PNG-24와 함께, 저는 전환기 동안 여전히 약간의 검은 테두리를 받고 있었습니다.
사이클 플러그인에 특별히 제한되지는 않지만 다른 사용자에게 도움이 될 수 있습니다..animate() 투명/반투명 png 파일에 대한 솔루션을 찾으려다가 이 스트림을 발견했습니다.저는 IE7과 IE8 모두에서 검은색 테두리가 발생하는 문제가 있었습니다.JQuery를 사용하여 불투명도를 애니메이션화하기 전까지는 이미지가 정상으로 표시됩니다.
$('#my-png-img').stop().animate({opacity:0.0},3000);
저는 여러 가지 해결책을 검토해 보았지만, 불행히도 그 중 어느 것도 이상적인 것은 없었습니다.이 스트림은 약간 오래된 스트림이지만 다른 사용자가 솔루션을 통합하기 위해 검색하는 데 도움이 될 수도 있습니다.저는 결국 트윈 헬릭스 솔루션(http://www.twinhelix.com/css/iepngfix/) 을 약간 수정하여 사용하게 되었습니다.저는 .htc 파일의 열렬한 팬은 아니지만 요점에서 벗어났습니다.IE7과 IE8을 트랩하기 위해 iipngfix.htc 파일(~line 75)을 편집했습니다.나는 변했어요...
!/MSIE (5\.5|6)/.test(navigator.userAgent) ||
로.
!/MSIE (5\.5|6|7|8)/.test(navigator.userAgent) ||
거기서 저는 이 비트를 CSS에 추가하는 것을 포함한 일반적인 지침(데모 참조)을 따랐습니다.
/* IE PNG Fix */
img, div, a, input {
behavior: url(/_css/iepngfix.htc)
}
게다가, 다른 사람들이 언급했듯이, 저는 제 이미지를 용기에 담아야 했습니다.
<div id="img-container"><img src="/images/my_semi_trans_png24.png" /></div>
그런 다음 포함된 div에 .animate() 효과를 적용했습니다.하지만 이것이 제가 꾸준히 일할 수 있는 유일한 방법이었습니다.어떤 경우에는 투명성 문제가 투명한 .gif 파일의 불투명도 애니메이션화에 영향을 미쳤다는 것도 알게 되었습니다.아 그리고 제가 .animate()보다는 .fadeIn()/.fadeOut을 사용했는지 여부는 아무런 차이가 없었습니다.
이 모든 것들은 당신이 요청받은 꽤 바쁜 일들입니다.코딩하는 하늘.
제 제안은 이렇습니다.IE는 색이 있는 배경 위에 있는 png 배경이 평화롭게 사는 것을 허락하지 않을 것입니다, 그렇게...
<div style="background:url('something.png') no-repeat 0 0 scroll; position:absolute; z-index:2;"> </div>
<div style="background-color:#fa0237; position:absolute; z-index:1;"> </div>
첫 번째 눈금은 z-index 2(두 번째 눈금 위)입니다.
이것은 bgColor를 첫 번째 Div의 배경 css에 넣고 두 번째 div를 제거함으로써 단순화될 수 있습니다.이것은 검은 부분의 문제를 해결합니다.저도 이런 문제가 있었습니다.
이 방법을 사용할 수 없는 문제가 있다는 것을 알 수 있는 유일한 방법은 두 개의 png 배경 이미지를 서로 겹쳐서 동시에 페이드해야 하는 경우입니다.그러지마세요.차례로 애니메이션을 만들어야 합니다.
- 이미지의 배경색을 단색으로 정의합니다.
.tv img {배경색: 흰색;}
- src 속성에 대한 이미지의 배경 이미지 CSS 속성을 정의합니다.
$(."message img"). 각(함수: {$(this).('background-image', $(this.attr('src');});
장점: 마크업을 변경할 필요가 없습니다.
단점: 배경색을 단색으로 적용하는 것은 허용되지 않는 경우가 있습니다.보통은 저를 위한 거예요.
이 문제를 해결하려면 다음을 추가하십시오.
"필터" : "
.css() 또는 .animate()에 연결하면 IE와 관련된 여러 문제를 해결할 수 있습니다.
가장 안정적인 해결책은 페이딩 스타일의 애니메이션에서 pngs를 사용하지 않는 것입니다.<IE9brows 파일
저는 이 문제에 대해 찾을 수 있는 거의 모든 "수정"과 수정 버전을 시도했지만 성공하지 못했습니다.은 페이딩 을▁the▁p즉▁condition(▁for▁a▁i▁do▁to▁export▁solution▁was제가ngs▁used▁anim▁wereations-fie▁applied▁to▁gifstyle▁p▁going▁to될▁and▁gif내다니▁fading/▁that▁(습in었용이것)용는하<IE9는 현대 보이지는 및 더 방법은 으로 작동합니다.gif 현 브 저 pngs 큼 IE8 및 이 버 방 훨 하 서 더 좋 다 니 합 는 동 로 작 으 적 정 안 법 은 방 이 보 며 이 아 씬 다 를 보 식 더 렌 링 는 전 전 대 에 만 라 우 만 않당신은 여전히 유능한 브라우저를 위해 좋은 png를 표시할 수 있고 수정이 적용될 때 다른 것은 깨지지 않습니다. 대부분의 png 해킹은 다른 css 속성을 깨트리는 것으로 알려져 있습니다.코드는 다음과 같습니다.
$(document).ready(function ()
{
if ($.browser.msie && parseInt($.browser.version, 10) < 9)
{
$(".myClass, .myOtherClass").each(function (val)
{
var backgroundValue = val.css("background-image");
backgroundValue.replace('.png', '.gif');
$(this).css("background-image", backgroundValue);
//you could just as easily do this with 'img' tags
});
}
}
Weezy의 해결책은 나에게 효과가 있었습니다!
.htc 파일을 추가로 수정하여 다음 행을 변경했습니다.
var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);
대상:
var bgPNG = bgSrc.match(/url[("']+(.*\.fixme.png[^\)"']*)[\)"']/i);
이렇게 하면 .htc 스크립트는 파일이 .fixme.png으로 끝나지 않는 한 모든 .png 파일을 무시합니다(예: "transparent.fixme.png").저는 스크립트 속도를 조금 높이고 문제가 있는 .png만 수정되도록 하기 위해 이를 의도했습니다.
투명하지 않은 다른 .png을 사용하므로 이 스크립트를 실행할 필요가 없습니다.
가장 좋은 해결책은 unitpngfix입니다.
스크립트에 포함하고 1px x 1px 투명 gif 경로를 제공해야 합니다.Voila!
언급URL : https://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem
'programing' 카테고리의 다른 글
| 자바스크립트를 사용하여 요소에 HTML의 큰 덩어리를 삽입하는 모범 사례는 무엇입니까? (0) | 2023.08.16 |
|---|---|
| C의 인수 목록에서 ...은 무엇을 의미합니까? (0) | 2023.08.16 |
| Spring@Scheduled에 시간대를 제공하시겠습니까? (0) | 2023.08.16 |
| PowerShell의 변수에서만 오류 출력을 캡처하는 방법 (0) | 2023.08.16 |
| 스프링 @트라이 캐치 블록 사용 시 트랜잭션 주석 (0) | 2023.08.16 |