IE browser_javascript 기술의 PNG 관련 기능
- WBOY원래의
- 2016-05-16 15:51:291332검색
현재 인터넷에서는 웹 페이지 효과에 대한 요구 사항이 점점 더 높아져 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) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "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>
)
<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 이미지의 배경이 검게 변하는 버그에 대한 해결 방법:
예를 들어 원본 코드는 다음과 같습니다. 0131c46f0d9245bb311d3114692a5fae
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
이것은 두 가지 질문이지만 실제로는 하나의 대답입니다. IE는 CSS 속성이 아닌 필터를 통해 투명도를 수정합니다. 따라서 이 버그를 이해하려면 필터에서 이유를 찾아야 합니다. 필터가 객체에 작용할 때 객체는 유형이어야 합니다. 즉, 레이아웃이어야 합니다. IE에는 hasLayout이라는 매우 특별한 속성이 있습니다. 이 속성은 레이아웃으로 컨테이너에 제공될 수 있습니다. 직접 작성할 수는 없지만 javascript를 통해 시작해야 합니다. 실제로는 특수 CSS 속성을 사용하여 위장한 CSS 속성을 사용하는 것이 있습니다. display:inline-block, float:left 등도 괜찮지만 확대/축소만 부작용이 없습니다.)