[CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript

先前在國外部落格發現一篇非常好用的教學:Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters,裡面有提供一部教學影片,非常好用,也很實在,底下可以先看影片,看完大概就可以針對 IE, FireFox, Chrome 進行 CSS Hack。 目前網頁製作,要符合多瀏覽器跨平台(IE, Safari, Chrome, FireFox…等),就必須動到 CSS Hack,雖然 Google 已經宣稱不支援 IE6,但是很多單位,很多學校跟客戶都是使用 IE6 瀏覽器,不只國內這樣,國外大廠也都希望支援 IE 系列,包含 IE6, IE7, IE8,這時候就必須知道如何分別針對各種不同 IE 做設定,底下就來看看實做例子。

包含 IE8 底下瀏覽器

先看底下例子:
body {
 color: red; /* all browsers, of course */
 color : green\9; /* IE8 and below */
}
請注意 color 後面的 \9,這是 IE only 的 tag,不可以任意修改,只有 IE 瀏覽器可以讀取,請勿修改成 \IE 或者是 \8 這些都是不對的,您會發現IE8,IE7,IE6 所有文字顏色都是綠色,但是 FireFox 是紅色。

包含 IE7 底下瀏覽器

先看底下例子:
body {
 color: red; /* all browsers, of course */
 color : green\9; /* IE8 and below */
 *color : yellow; /* IE7 and below */
}
上面例子可以發現,重點是在 *color 前面的 *,只有 IE7 跟其版本底下才看的到效果,上面程式碼會得到,FireFox Chrome 瀏覽器字型顏色是紅色,IE8 會是綠色,IE7 則是黃色。

包含 IE6 底下瀏覽器

先看底下例子:
body {  
 color: red; /* all browsers, of course */  
 color : green\9; /* IE8 and below */  
 *color : yellow; /* IE7 and below */  
 _color : orange; /* IE6 */  
}  
可以發現 _ 是屬於 IE6 所認得的字元,全部瀏覽器會是紅色,IE8 會是綠色,IE7 會是黃色,IE6 會是橘色,這些都是 CSS Hack 的方法,大家可以注意到本篇重點就是在 \9 * _ 這三個符號,這三個符號針對了 IE8 IE7 IE6 這三個瀏覽器 CSS 的 Hack,也請大家注意優先權順序,如果把順序兌換,改成底下:
body {  
 color: red; /* all browsers, of course */  
 _color : orange; /* IE6 */ 
 *color : yellow; /* IE7 and below */
 color : green\9; /* IE8 and below */   
}
可以去看看會出現什麼結果?

IE6 Png 透明背景修正,以及 background-image filter

大家都知道 IE6 不支援透明背景 PNG 圖檔,所以網路上有很多解法,一種就是針對 img tag 做處理,另一種就是設定在 css background 的 IE6 filter,底下提供兩種不同狀況解法,第一種是 js 修改 img tag PNG 圖檔:這是網路上寫好的 js 檔案
/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in  with DEFER keyword wrapped in conditional comments:


*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}
存檔之後,請在 header 中間加入底下:
另一種就是 css 狀況解法:
#pic{
 background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/test.png', sizingMethod='scale');
} 
如果要針對 IE6 瀏覽器,請改寫為
#pic{
 background-image: url('./images/test.png');
 _background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/test.png', sizingMethod='scale');
} 
這樣就可以了。當然您可以針對 IE6 去 import 不同 CSS 檔案

另外就是要提一下 html 針對不同 IE 的 hack,這是微軟在 IE5 就開始支援的功能,在 html 註解都是使用 ,這是所有瀏覽器都看得懂得註解,那微軟針對 IE 有提供不同的方式來針對各種 IE 瀏覽器版本進行 Hack,例如底下:




 

您正在使用的瀏覽器不是 ie 。

大致上是這樣,如果有任何問題,可以提出來一起討論,CSS Hack 真是好玩 ^^。因為以前在學校常常被 IE6 折磨所整理出來的 Q&A。希望對於 CSS 愛好者有幫助。 reference: Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters Conditional Comments [if IE] : IE 專用 (IE only) 條件式 HTML 註解的語法 IE6支援PNG透明背景 CSS設定
  • 謝謝分享
    我也是現在看到您的網站
    才知道有這種方式可以讓舊的IE支援透明的PNG
    PNG 32bit格式原來要經過這樣的調整

  • Pingback: [jQuery] 解決 IE6 PNG 透明背景 (Supersleight jQuery Plugin for Transparent PNGs in IE6) | 小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY()

  • Polyamide

    您好,我發現 9 在IE9中也會被套用喔。有辦法排除IE9 嗎?

  • Anonymous

    你可以用
    <!–[if lt IE 9]> 
    <![endif]–> 
    試試看

  • Polyamide

    謝謝你!
    應該不能像內文提到的方法一樣,
    能夠直接用在CSS檔案裡面,
    而是用來切換CSS檔用的。還是你是說用在 標籤內?

  • Polyamide

    留言被切掉了…
    我是說,你說的方法應該不能用在CSS檔案裡,而是用來切換CSS檔案。還是你說用在 標籤裡?

  • Anonymous

    <!–[if lt IE 9]> 
    <![endif]–>  
    使用這方式可以根據不同的瀏覽器,載入不同的 css 檔案 ~
    應該是可以解決你目前遇到的問題

  • wherewei wherewei

     我用了您說的css解法,OK了
    可是在IE6,該張圖片卻變大了@@