IE browser_javascript 기술의 PNG 관련 기능

현재 인터넷에서는 웹 페이지 효과에 대한 요구 사항이 점점 더 높아져 PNG 이미지를 사용하는 것이 불가피해졌습니다. PNG는 PNG8, PNG24, PNG32 등 여러 형식으로 나뉘며 그중 가장 일반적으로 사용되는 형식도 있습니다. 적당한 디스플레이 효과와 크기를 가지고 있으며, 반투명도, 투명도, 매우 풍부한 색상을 지원합니다. 그러나 대부분의 중국 사람들은 IE 시리즈나 IE를 핵심 시리즈로 사용하는 브라우저와 WINDOWS XP의 용량이 상대적으로 크기 때문입니다. 국내 시장 점유율은 여전히 ​​높으며 많은 사람들이 IE6 IE7 IE8 및 기타 브라우저를 사용하고 있으며 이러한 브라우저는 PNG 지원에 다소 차이가 있으며 IE7 IE8은 PNG를 불완전하게 지원합니다. .IE7 IE8에서 이미지의 투명도를 변경하면 투명 영역에 검은색 테두리가 표시됩니다. 반투명한 경우 전체 반투명 영역이 검은색으로 표시됩니다. 몇 가지 연구 결과에 따르면 PNG를 배경으로 사용하고 Microsoft 고유 필터를 사용하면 PNG를 지원하지 않는 IE6의 문제를 해결할 수 있으며 JQUERY 애니메이션 투명도 효과를 사용할 때 검은색 가장자리 문제도 해결할 수 있습니다. IE7과 IE8에는 다음과 같은 실제 이미지가 포함된 코드가 있습니다.

<script>
function correctPNG() {
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])
  if ((version >= 5.5) && (document.body.filters)) {
    var lee_i = 0;
    var docimgs=document.images;
    for (var j = 0; j < docimgs.length; j++) {
      var img = docimgs[j]
      var imgName = img.src.toUpperCase();
      if (imgName.substring(imgName.length - 3, imgName.length) == "PNG" && !img.getAttribute("usemap")) {
        lee_i++;
        var SpanID = img.id || 'ra_png_' + lee_i.toString();
        var imgData = new Image();
        imgData.proData = SpanID;
        imgData.onload = function () {
          $("#" + this.proData).css("width", this.width + "px").css("height", this.height + "px");
        }
        imgData.src = img.src;
        var imgID = "id='" + SpanID + "' ";
        var imgClass = (img.className) &#63; "class='" + img.className + "' " : ""
        var imgTitle = (img.title) &#63; "title='" + img.title + "' " : "title='" + img.alt + "' "
        var imgStyle = "display:inline-block;" + img.style.cssText
        if (img.align == "left") imgStyle = "float:left;" + imgStyle
        if (img.align == "right") imgStyle = "float:right;" + imgStyle
        if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
        var strNewHTML = "<span " + imgID + imgClass + imgTitle
       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
        img.outerHTML = strNewHTML;
        j = j - 1;
      }
    }
  }
}
//判断是否为IE8及以下浏览器，其实除了这三个浏览器不支持addEventListener，其它浏览器都没问题
if (typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined") {
  window.attachEvent("onload", correctPNG);
}
</script>

페이지의 /body 끝 태그 앞에 jquery1.8 클래스 라이브러리를 참조한 후 위 코드를 추가하세요. IE6 7 8에서는 PNG24를 표시하는 데 문제가 없습니다. 애니메이션을 실행하거나 사진을 가져와야 하는 경우 IE 6 7 8번에서는 PNG 이미지를 찾을 수 없거나 위치와 투명도를 변경할 때 응답이 없습니다. 그 이유는 올바른PNG가 페이지에 있는 모든 PNG의 IMG 태그를 SPAN 태그로 대체하기 때문입니다. 그런 다음 SPAN 태그에 필터: progid를 사용합니다. :DXImageTransform.Microsoft.AlphaImageLoader는 PNG 이미지를 로드하므로 이 DIV에는 하나의 IMG 태그만 허용되는 방식이 권장됩니다. DIV 관련 작업(예:

)

<div id='test'><img src='xxxx.png'/></div>
<script>
$("#test").animate({opacity:0.2,marginLeft:500},1000,function(){alert('run complete');});
</script>

또 다른 상황은 이 이미지의 투명도와 변위 외에도 너비와 높이도 변경해야 한다는 것입니다. 이 경우 다음 방법을 권장합니다.

<div id='test'><img src='xxxx.png'/></div>
<script>
$($("#test span")[0]||$("#test img")[0]).animate({opacity:0.2,marginLeft:500,width:'500px',height:'500px'},1000,function(){alert('run complete');});
</script>

버그: IE7 및 IE8에서 png 이미지의 투명도를 동적으로 수정하는 경우, 예를 들어 페이드인을 적용하고 이미지의 투명도를 25%로 조정하면 투명도 정보가 매우 이상한 버그가 나타납니다. png가 표시되지 않습니다. 아주 촌스러운 검정색으로 변했어요!

IE7 및 IE8에서 png 이미지의 배경이 검게 변하는 버그에 대한 해결 방법:

1. 이미지의 투명도를 직접 변경하지 말고 이미지가 들어갈 컨테이너를 넣어서 컨테이너의 투명도를 수정하세요

예를 들어 원본 코드는 다음과 같습니다. 0131c46f0d9245bb311d3114692a5fae

다음으로 수정:21c86848ea3e281d6919291ffc9afa87881c3d16ac7d3a757d0ee88c64187efa16b28748ea4df4d9c2150843fecfba68

2. 이 컨테이너에 배경색을 추가하세요

버그 해결의 핵심은 다음과 같은 단계에 있습니다.

.share-list-icon-shadow{ 
  width:60px;height:21px; 
  position:absolute;bottom:8px;left:0px;z-index: 1; 
  margin: 0 auto; 
  display:block; 
  background:#FAFDEF; 
} 

일반적인 상황에서는 이 시점에서 버그가 해결됩니다. 여전히 문제가 있는 경우 아래를 참조하세요.

3. 컨테이너에 확대/축소 추가: 1

zoom: 1 어떤 역할을 하나요? IE에 왜 이런 버그가 있나요?

이것은 두 가지 질문이지만 실제로는 하나의 대답입니다. IE는 CSS 속성이 아닌 필터를 통해 투명도를 수정합니다. 따라서 이 버그를 이해하려면 필터에서 이유를 찾아야 합니다. 필터가 객체에 작용할 때 객체는 유형이어야 합니다. 즉, 레이아웃이어야 합니다. IE에는 hasLayout이라는 매우 특별한 속성이 있습니다. 이 속성은 레이아웃으로 컨테이너에 제공될 수 있습니다. 직접 작성할 수는 없지만 javascript를 통해 시작해야 합니다. 실제로는 특수 CSS 속성을 사용하여 위장한 CSS 속성을 사용하는 것이 있습니다. display:inline-block, float:left 등도 괜찮지만 확대/축소만 부작용이 없습니다.)

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.