PNG related features in IE browser

This article gives you a summary of PNG in IE browser, the various problems of the solution, very practical, there is a need for small partners can refer to.

At present, the Internet for Web page effect requirements more and more high, the inevitable use of PNG pictures, PNG is divided into several formats, PNG8 PNG24 PNG32, the most commonly used, but also show the effect and the size of the more moderate is PNG24, supporting translucent, transparent, color is very rich, But because our countrymen use IE Series or IE as the core series of browsers, and because WINDOWS XP in the domestic market share is larger, and many people in XP are still using IE6 IE7 IE8 Browser, and these browsers for PNG support more or less gap, IE6 completely does not support PNG,IE7 IE8 support PNG is incomplete, when you change the transparency of a picture under IE7 IE8, the PNG transparent area will have a black border and, if translucent, the entire translucent area is black, which is not acceptable for a pleasing page. Research, found that the PNG when the background, with Microsoft-specific filters to load the picture, you can solve the IE6 does not support PNG problem, and can also solve the IE7 and IE8 under the use of jquery animation transparency effect when the black edge of the problem, there is a real image of the code, as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

In the page before the end of the/body tag jquery1.8 class library, and then add the above code, IE6 7 8 show PNG24 No problem, if you need to perform animate animation or get pictures, found in IE 6 7 8 can not find a PNG picture, Or find a change in its location and the transparency diagram does not respond because Correctpng replaces all of PNG's IMG tags on the page with a span label and then uses FILTER:PROGID:D on the Span tab XImageTransform.Microsoft.AlphaImageLoader the PNG picture in, so it is recommended that you include the picture in Div, which allows only an IMG tag, and then a position or transparency action on the DIV Cases:

?

1 2 3 4

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

There is also a situation where I have to change the width and height of this image in addition to transparency and displacement, and I recommend the following methods:

?

1 2 3 4

<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>

Bugs: Under IE7 and IE8 if you dynamically modify the transparency of a PNG image, for example, if you apply a fadein, and the transparency of the image is tuned to 25%, then there will be very strange bug,png transparent information gone! It turned out to be a very ugly black!

IE7 and IE8 the PNG picture background black Bug solution:

1, do not directly change the transparency of the picture, but to the picture set a container, to modify the transparency of this container

For example, the original code is:

Modified into:

2. Add a background color to this container

Very important, the key to solving bugs is this step, such as:

?

1 2 3 4 5 6 7

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

Typically, this bug is resolved, and if there is a problem, see below:

3. Add a zoom:1 to the container

What is the role of zoom:1? Why does IE have this bug?

This is two questions, in fact, is an answer. IE modify transparency, not through CSS properties, but through the filter filter, so to understand the bug, you need to look for the reason from the filter filter. When filter acts on an object, the object must be a body, that is, it must be layout, and IE has a very special attribute: haslayout, this attribute can give the container a layout,haslayout. You can not start directly by writing CSS, and must be started through JavaScript, in fact, there is a way to start, is the use of special CSS properties, disguised as the haslayout boot, this CSS property is zoom (other properties such as display: Inline-block, Float:left and so on, and only zoom have no side effects.

The above mentioned is the entire content of this article, I hope you can enjoy.