IE CSS Bug系列:PNG图像与背景颜色错配

开发 前端
IE 浏览器不支持很多CSS属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共58个指南,70个解决方案。

影响版本

该bug出现在:IE8,IE7,IE6

表现

即使使用同样的颜色代码,CSS里指定的颜色会与PNG图像里使用的颜色不同。

教程日期

2009.08.09 07:07:46 星期日

描述

你制作了一个Logo或某些高端洋气的艺术图并将其保存为PNG图片。然后你把它作为背景(或者一个正常图像)并用与此图片中一样的颜色将其包围起来。但很可惜的是,它们在IE中显示出完全不同的色调(有人说这也会出现在Mac系统中的safari浏览器,我没Mac没法测试),让我们来看看:

演示

由于该bug的天然特性,这个演示在一个单独的页面上

HTML Code

  1. <div></div> 

CSS Code:

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

 

这个“bug”有意思的地方是,它并不是个真正的bug:),这是一个特性!更有意思的是,我发现人们开始在找“网站安全色”,要是颜色不对,就觉得他们自己用“错”了颜色。不管怎样,空谈已经太多了,让我们来解决掉这个破事儿:

解决方案

以下是针对上面所说的bug的解决方案,按照解决方案的类型排列

方案(伪bug)

解决日期

2009.08.09 07:22:32 星期日

修复版本

所有受影响的版本

描述

当我说它是一个功能而不是bug的时候,我的意思是:IE浏览器是支持“PNG咖玛轮廓”的。我找到过一个页面似乎也在讨论这个问题: The Sad Story of PNG Gamma ”Correction” by Henri Sivonen。对于这个bug,我们的解决方案是简单地从PNG图片里删除咖玛轮廓,来看看修复后的演示:

由于bug的天然特性,演示展示在单独的页面上查看。

HTML Code:

  1. <div></div> 

CSS Code:

  1. div { 
  2.     width500px
  3.     height500px
  4.     background#74822D url(pngcrush_fixed.png) no-repeat center

我们的代码保持不变。我所做的是用pngcrush程序(注1)来修复图片。在这里我要指出的是,你可以从一开始就设置你的编辑器使其不保存咖玛轮廓。看起来会在默认情况下调皮地保存这些轮廓的编辑器只有Photoshop;因为我是一个开心的Gimp用户,我自己的PNG图片没有这样的问题,但这也意味着我并不能教你如何去配置photoshop不去保存这些轮廓。

不管怎样,pngcush也会减少图片的大小,所以为什么不试一下呢。 我用来修复演示图片的命令是这样 的:pngcrush -brute_force -rem gAMA -rem cHRM -rem sRGB -rem iCCP pngcrush.png pngcrush_fixed.png。 其中的参数解释已经超出了本教程的范畴 –还是去读那些操蛋的手册吧。

在Ubuntu系统中,pngcrush可以从Universe repos库里获取: sudo apt-get install pngcrush

1pngcrush 是一个用来批量压缩 PNG 格式图片的工具

原文链接:http://haslayout.net/css/PNG-Image-and-Background-Color-Mismatch

责任编辑:陈四芳 来源: 伯乐在线
相关推荐

2013-10-29 15:20:38

IECSS

2013-10-31 11:12:56

IECSS

2013-10-30 09:57:43

IECSS

2013-09-09 10:51:07

CSSIE浏览器

2013-10-28 14:01:03

IECSS

2013-10-29 10:32:59

IECSS

2009-08-13 10:12:07

IE的CSS Bug

2010-08-17 15:38:49

CSS兼容IE7IE8

2010-09-03 09:55:10

CSS伪类hover

2010-08-18 13:27:15

CSS兼容IE6

2010-10-08 13:27:51

IE6pngJavaScript

2010-08-27 15:56:52

IEFirefoxCSS

2010-08-20 14:47:02

IEFirefoxCSS

2010-08-19 13:54:51

FirefoxIECSS

2010-09-02 11:03:48

CSS

2010-08-16 15:15:12

CSSFireFoxIE

2010-08-19 10:40:36

position:fiIE6

2010-09-01 15:16:47

CSSIEFirefox

2010-09-09 16:47:49

CSS paddingFirefox

2010-08-18 10:24:51

IE6IE7IE8
点赞
收藏

51CTO技术栈公众号