Functions related to PNG in IE browser and png in IE browser

Functions related to PNG in IE browser and png in IE browser

Currently, the Internet has higher and higher requirements on web page effects, and it is inevitable to use PNG images. PNG is divided into several formats, PNG8 PNG24 PNG32, the most commonly used of which, PNG24 is also a relatively moderate Display Effect and size. It supports translucent, transparent, and rich colors. However, because our Chinese people use IE series or IE kernel series browsers, in addition, windows xp has a large market share in China, and many XP users are still using IE6 IE7 IE8 and other browsers. These browsers have more or less different support for PNG, IE6 does not support PNG at all, and IE7 IE8 does not support PNG completely. When the transparent image is changed under IE7 IE8, there will be a black border in the area where the transparent image is extended, if there is translucent, the entire translucent area is black, which is unacceptable for beautiful pages. After research, we found that PNG is the background, loading images with a filter unique to Microsoft can solve the problem that IE6 does not support PNG, and it can also solve the problem of black edges when JQUERY animation is used in IE7 and IE8, the Code has a real image, as shown below:

<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.css Text 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 ;}}// determine whether IE8 or the following browsers are supported, no problem with other browsers. if (typeof window. addEventListener = "undefined" & typeof document. getElementsByClassName = "undefined") {window. attachEvent ("onload", correctPNG) ;}</script>

REFERENCE The jquery1.8 class library before adding the above Code before the end mark of the page. IE6 7 8 shows that PNG24 is okay. If you need to execute an animation or get an image, I found that I could not find the PNG Image under ie 6 7 8, or I found that I did not respond when I changed the position of the image, this is because correctPNG replaces all the IMG labels of PNG on the page with the SPAN label, and then uses filter: progid: DXImageTransform on the SPAN label. microsoft. alphaImageLoader loads the PNG image. Therefore, we recommend that you include the image in a DIV. Only one IMG tag is allowed in this DIV, then perform operations on the position or transparency of the DIV, for example:

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

In addition to transparency and displacement, I also need to change the width and height of the image. In this case, I suggest using the following methods:

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

BUG: In IE7 and IE8, if you dynamically modify the transparency of the png image, for example, if you apply a fadeIn and adjust the transparency of the image to 25%, a very strange bug will occur, the transparent information of png is gone! It turns into ugly black!

Bug solution for blackening png Image backgrounds in IE7 and IE8:

1. Do not directly change the image transparency. Instead, set a container for the image to modify the transparency of the container.
For example, the original code is:

Modify to: <div class = "share-list-icon-shadow"> </div>

2. Add a background color to the container.

Very important. The key to solving the bug lies in this step, for example:

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

Generally, this bug is fixed. If the problem persists, see the following:

3. Add zoom: 1 to the container.

Zoom: what is the role of 1? Why does IE have this bug?
These two questions are actually an answer. IE modifies the transparency, not through the css attribute, but through the filter. To understand this bug, you need to find the cause from the filter. When a filter acts on an object, this object must have a shape, that is, it must be layout, and IE has a special attribute: hasLayout, which can be assigned to the container as layout, the hasLayout attribute is a bit strange. You cannot start it by writing css directly, but you must start it through javascript. In fact, there is another way to start it, that is, using special css attributes to start hasLayout in disguise, this css attribute is zoom (other attributes such as display: inline-block and float: left can also be used, but only zoom has no side effects)

The above is all the content of this article. I hope you will like it.