Only change CSS to make IE6 support transparent PNG

As the leader in the browser market, IE6 is an evil character and does not support transparent PNG. This "feature" makes IE6 the only heterogeneous browser. Although the CSS Filter exclusive to IE can do this, the code is complicated and the link under the label of the filter is invalid. Here, I would like to share with you an idea that can enable IE6Not perfect
Supports transparent PNG images with "dummies" scripts. As to why it is not perfect, we will analyze it later.

Source:
Http://www.twinhelix.com/css/iepngfix/

Preview:
Http://www.twinhelix.com/css/iepngfix/demo/

Download:
Http://www.twinhelix.com/css/iepngfix/iepngfix.zip

Effect:
Allows IE6 to display transparent PNG images normally inserted using the label or written in CSS background-image mode.

Usage:
 

1. Download the scriptIepngfix. HTC
Decompress and blank.gif to the appropriate directory. HTC is HTML components.
The file is a 1x1 pixel transparent GIF image. If this file is missing, the PNG Image inserted by the label is displayed as a Red Cross-stick.

2.Iepngfix. HTC
ModifyingBlank.gif
The path of VaR blankimg named 'blank.gif ', which is the only configuration to be modified.

If (typeof blankimg = 'undefined') var blankimg = 'blank.gif ';

3. Associate transparent PNG elements with. HTC files in CSS.

Example: * {behavior: URL (iepngfix. HTC )}

In three steps, IE6 supports transparent PNG images.

Advanced usage:

1. Use the wildcard "*" in CSS to call the. HTC script to process all the labels in the body, increase the client resource consumption, and delay the page loading time. We can refine the CSS selector to apply scripts to elements of a tag or even an ID for a better user experience.

Example: IMG, div {behavior: URL (iepngfix. HTC )}
Div # header {behavior: URL (iepngfix. HTC )}

If you cannot predict where the filter is needed on the page, you can also write the behavior into a class for calling.

. Pngsupport {behavior: URL (iepngfix. HTC )}

2. Use IE's conditional annotations to apply the script only to IE6 and earlier versions, reducing the impact on IE7 users.

<! -[If lte ie 6]>
* {Behavior: URL (iepngfix. HTC )}
<! [Endif]->

3. behavior is an attribute unique to IE. Writing a style sheet directly will make the page unable to pass W3C CSS verification. Use the following script to write behavior to solve this problem, provided that the page must haveExternal style sheet
And is located inAbove
. The inconvenience caused by this method is that only one selector can be added at a time.

<SCRIPT type = "text/JavaScript">
If (document. All &/MSIE (5/. 5 | 6)/. Test (navigator. useragent )&&
Document. stylesheets & document. stylesheets [0] & document. stylesheets [0]. addrule)
{
Document. stylesheets [0]. addrule ('*', 'behavior: URL (iepngfix. HTC )');
Document. stylesheets [0]. addrule ('img ', 'behavior: URL (iepngfix. HTC )');
Document. stylesheets [0]. addrule ('div ', 'behavior: URL (iepngfix. HTC )');
}
</SCRIPT>.

Defects:

At the beginning of the article, I said that this script is not perfect. Let's take a look at the short versions of iepngfix. HTC.

1. The PNG transparent background may cause the internal link of the element to fail to be clicked, especially when the link isHas the float attribute
Such as a link in a floating list. Recommended solution:Use display: inline instead of float to arrange block-level elements horizontally.

2. transparent PNG plug-in of the imgtag can be stored with a right key without authorization. For example, only the transparent PNG plug-in can be used to retrieve the coverage of the entire blance.gif. What? Do not want blank.gif? Wait for the barbecues to be eaten.

3. PNG image as the backgroundUnable to be tiled and positioned
That is, the default value of background-repeat is no-repeat, and the background-position is permanently invalid.

4. When the page is loaded, we can still see the gray edge of the PNG Image temporarily because IE6 does not support it. The time depends on the page file size and network speed.

5. I suggest setting a fixed width for the element using the PNG background, but I have not found any problems with width: Auto in my use.

6. Browsers earlier than Version 5.5 are not supported, but this issue is not a problem.