伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的 @rubyisapm 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
影響版本
該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 2 3 4 5 |
div { width: 500px; height: 500px; 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 2 3 4 5 |
div { width: 500px; height: 500px; 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
注1：pngcrush 是一個用來批量壓縮 PNG 格式圖片的工具