Shulou(Shulou.com)06/02 Report--

This article mainly introduces "PNG image and background color mismatch analysis in IE CSS Bug". In daily operation, I believe many people have doubts about PNG image and background color mismatch analysis in IE CSS Bug. Xiaobian consulted all kinds of information and sorted out simple and easy to use operation methods. I hope to answer your doubts about "PNG image and background color mismatch analysis in IE CSS Bug"! Next, please follow the small series to learn together!

affected version

This bug appears in:IE8,IE7,IE6

performance

Even with the same color code, the colors specified in CSS will differ from the colors used in PNG images.

Tutorial Date

August 9, 2009 07:07:46 Sunday

described

You create a Logo or some high-end artistic image and save it as a PNG image. Then you use it as a background (or a normal image) and surround it with the same colors as in this image. But unfortunately, they show completely different colors in IE (some people say this will also appear in safari browser on Mac, I can't test without Mac), let's see:

demo

Due to the nature of the bug, this demo is on a separate page

HTML Code

CSS Code：

div { width: 500px; height: 500px; background: #74822D url(pngcrush.png) no-repeat center; }

What's interesting about this bug is that it's not really a bug:), it's a feature! More interestingly, I noticed that people started looking for "site-safe colors," and if the colors weren't right, they thought they were using the "wrong" color. Anyway, there's been too much talk, so let's get this shit over with:

solutions

Here are the solutions to the bugs mentioned above, sorted by type of solution

Solution (false bug)

resolution date

August 9, 2009 07:22:32 Sunday

fix release

All affected versions

described

When I say it's a feature and not a bug, I mean IE is a browser that supports PNG gamma profiles. I found a page that seemed to discuss this issue: The Sad Story of PNG Gamma "Correction" by Henri Sivonen. Our solution to this bug is simply to remove the kama outline from the PNG image and take a look at the fixed demo:

Due to the nature of bugs, demos are viewed on separate pages.

HTML Code：

CSS Code：

div { width: 500px; height: 500px; background: #74822D url(pngcrush_fixed.png) no-repeat center; }

Our code remains unchanged. What I did was fix the image with pngcrush. What I want to point out here is that you can set your editor from the beginning so that it doesn't save gamma outlines. The only editor that seems to mischievously save these outlines by default is Photoshop; since I'm a happy Gimp user, my own PNG images don't have this problem, but that also means I can't teach you how to configure Photoshop not to save these outlines.

Anyway, pngcush also reduces the size of images, so why not give it a try. The command I used to fix the demo image was pngcrush -brute_force -rem gAMA -rem cHRM -rem sRGB -rem iCCP pngcrush. png pngcrush_fixed.png.

On Ubuntu, pngcrush can be obtained from Universe repos: sudo apt-get install pngcrush

Note 1: pngcrush is a tool for batch compression of PNG images

At this point, the study of "PNG image and background color mismatch analysis in IE CSS Bug" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.