使用IE10 +会显示这种方法

Question

I'm looking to display a transparent png file, but would like to show IE6 a jpg to avoid an problems. I know it's 2014 and IE6 should be forgotten about, but without too much effort my site still works with IE6, apart from this one little problem.

I had thought about simply using conditional comments to say:

<!--[if lte IE6]>
 <img src="foo.jpg">
<![endif]-->
<![if !IE]>
 <img src="foo.png">
<![endif]>

However I'm not sure what the deal is with other browsers and the use of <![if !IE]> ? Also with IE10 not supporting conditional comments, would this cause problems? Appreciate any clarification on this. Thanks.

UPDATE: After trying a few methods, I decided in the end to cheat a little. I got rid of conditional comments entirely and took a screenshot of what the image looked like in firefox with transparency and basically saved that as a jpg. Due to image involved and where it was in the layout, this worked perfectly. Thanks to everyone's answers.

Answer 1

Try using <!--[if lte IE 6]> instead of <!--[if lte IE6]>

Example:

<!--[if lte IE6]>
  <img src="foo.jpg">
<![endif]-->
<![if !IE]>
  <img src="foo.png">
<![endif]>

Answer 2

Forget the conditional comments and fix your PNG instead. The problem with PNGs when it comes to older IE versions is that when you use alpha transparency, you end up with an ugly grey background instead of nice transparency. To avoid this, all you need to do is set the transparency correctly on an 8-bit PNG, something Photoshop's "save for web" dialog cannot do.

Fireworks

http://www.sitepoint.com/png8-the-clear-winner/ (I've personally used this and it works well, comes bundled in Adobe's Creative Suite)

pngquant

http://cubicspot.blogspot.ca/2010/01/transparent-png8-is-solution-to-ie6.html

Even if you weren't trying to support IE6, I would recommend this for images that don't require more than 256 colors because it makes a significantly smaller image.

Find a program that will let you modify the bKGD

The grey color that old IE versions display comes from a chunk of the PNG called "bKGD". If you can find a program that will let you modify this value to a more attractive color, you'll at least get something that looks the same as a JPEG for old browsers while having the alpha transparency in modern browsers.

http://cubicspot.blogspot.ca/2010/03/pseudo-transparent-24-bit-png-in.html

See also: Software for creating PNG 8bit transparent images?

Answer 3

However I'm not sure what the deal is with other browsers and the use of <![if !IE]> ? Also with IE10 not supporting conditional comments, would this cause problems?

If you convert the negated condition to proper HTML comment syntax, then it will not be a problem for other browsers or for IE10 and later:

<!--[if lte IE 6]>
 <img src="foo.jpg">
<![endif]-->
<!--[if !IE]><!-->
 <img src="foo.png">
<!--<![endif]-->

Notice the intermediate <!--> and <!-- delimiters, which split the negation and its endif into two separate comments allowing other browsers and newer IEs to see the PNG image. Older IEs will continue to obey the condition and thus ignore that image.

Additionally, as mentioned in another answer, there should be a space after the IE token, so it should be IE 6 rather than IE6 .

Other than these, I don't see anything else that's wrong with your conditional comments.