Compatible with IE6 IE7 IE8 FF opera Chrome's streamlined PNG transparent method

First attach a document: IE6 IE7 IE8 hack test official documentation: http://msdn.microsoft.com/en-us/library/cc351024 (vs.85). aspx

There have been many ways to make IE6 support transparent PNG on the Internet. However, the problem is that IE7 and IE8 are annoying now, and those methods are not compatible with new browsers (including repeated rendering, such as the original 50% transparency, after repeated rendering, it becomes opaque ......)

To solve this problem, I have installed IE6 IE7 IE8 Ff on this very poor computer ...... (IE8 is a beta version. The coexistence version of the official version is not found ......).

Note: The following methods are implemented through CSS hack.

There are also articles on the Internet. For the CSS hack test results of IE6 IE7 IE8 ff, you can also write the targeted PNG transparent method based on the results, but here is the simplest.

First, let's talk about the specific ideas. The following are the test results of the transparent background and transparent filter:

Transparent background PNG: not supported by IE6 | supported by IE7 | supported by IE8 | supported by FF

Transparent background filter: supported by IE6 | supported by IE7 | supported by IE8 | not supported by FF

Overlapping filters and backgrounds: IE6/(impossible to coexist) | IE7 | IE8 does not overlap | FF/(impossible to coexist)

There is a widely spread and transparent method on the Internet, but it is very complicated and has compatibility problems with IE8. Therefore, based on the hack of various browsers, I wrote the most streamlined PNG Transparent Code compatible with IE6 IE7 IE8 FF:

 

Class{
 Width:100%; Height:100%; Background: URL (PNG address) No-repeat Left Top;{Your other code}
 _Filter: progid: DXImageTransform. Microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src ="PNG address");
 _ Background: None;
}

The following is the highlighted Code (the code is the same, just to improve readability ):

• Class {
•  width: 100%; height: 100%; background: url(PNG address)no-repeat left top;
•  {Your other code}
•  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="PNG address");
•  _background: none;
• }

Above:

The bold part indicates the important part that must be retained (but it does not mean that the part that is not bold does not need to be retained---|)

Italics indicate the places you need to modify according to your actual situation.

 

Width: 100%; Height: 100%;This must be retained but 100% can be modified, because if there is no width or height, the filter will become invalid ~

No-repeat left topThis can be written or not modified by yourself.

{Your other code} Write your other code here, such as display: inline ~

_ Background: none;Although this statement does not appear to be correct, you can avoid minor issues by writing this sentence.

 

The hack principle is quite simple. The "_ attribute" is only supported by IE6, so the filter only applies to IE6 and IE6 without background.

 

Note:

(1) Transparent filter will cause all hyperlinks (text and images) and forms in that area to be unable to be clicked (IE6 problem), because the filter is located above the hyperlink and form in IE6. The solution is to make them relatively floating (CSS statement:Position: relative;Recommended usage:_ Position: relative;)

(2) CSS hack cannot pass W3C CSS Verification