IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript-优快云博客

本文介绍了针对不同版本IE浏览器的CSS Hack技巧，包括通过特殊语法实现特定版本IE的样式定制，解决IE6 PNG透明度问题的方法，以及利用条件注释进行版本区分。

http://blog.wu-boy.com/2010/04/06/2110/

先前在國外部落格發現一篇非常好用的教學：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 <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/
  

  

  var arVersion 
  = navigator.
  appVersion.
  split
  (
  "MSIE"
  )
  

  var version 
  = parseFloat
  (arVersion
  [
  1
  ]
  )
  

  

  if 
  (
  (version 
  >= 
  5.5
  ) 
  && 
  (document.
  body.
  filters
  )
  ) 
  

  {
  
   
  for
  (
  var i
  =
  0
  ; i
  <document.
  images.
  length
  ; i
  ++
  )
  
   
  {
  
      
  var img 
  = document.
  images
  [i
  ]
  
      
  var imgName 
  = img.
  src.
  toUpperCase
  (
  )
  
      
  if 
  (imgName.
  substring
  (imgName.
  length
  -
  3
  , imgName.
  length
  ) 
  == 
  "PNG"
  )
  
      
  {
  
         
  var imgID 
  = 
  (img.
  id
  ) 
  ? 
  "id='" 
  + img.
  id 
  + 
  "' " 
  : 
  ""
  
         
  var imgClass 
  = 
  (img.
  className
  ) 
  ? 
  "class='" 
  + img.
  className 
  + 
  "' " 
  : 
  ""
  
         
  var imgTitle 
  = 
  (img.
  title
  ) 
  ? 
  "title='" 
  + img.
  title 
  + 
  "' " 
  : 
  "title='" 
  + img.
  alt 
  + 
  "' "
  
         
  var imgStyle 
  = 
  "display:inline-block;" 
  + img.
  style.
  cssText 
  
         
  if 
  (img.
  align 
  == 
  "left"
  ) imgStyle 
  = 
  "float:left;" 
  + imgStyle
  
         
  if 
  (img.
  align 
  == 
  "right"
  ) imgStyle 
  = 
  "float:right;" 
  + imgStyle
  
         
  if 
  (img.
  parentElement.
  href
  ) imgStyle 
  = 
  "cursor:hand;" 
  + imgStyle
  
         
  var strNewHTML 
  = 
  "<span " 
  + imgID 
  + imgClass 
  + imgTitle
  
         
  + 
  " style=\"" 
  + 
  "width:" 
  + img.
  width 
  + 
  "px; height:" 
  + img.
  height 
  + 
  "px;" 
  + imgStyle 
  + 
  ";"
  
         
  + 
  "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  
         
  + 
  "(src=\'" 
  + img.
  src 
  + 
  "\', sizingMethod='scale');\"></span>" 
  
         img.
  outerHTML 
  = strNewHTML
  
         i 
  = i
  -
  1
  
      
  }
  
   
  }
  

  } 
 

存檔之後，請在 header 中間加入底下：

 
  <!--[if lt IE 7]>
  
  <script defer type="text/javascript" src="pngfix.js"></script>
  
  <![endif]-->

另一種就是 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 檔案

 
  <!--[if lt IE 7]>
  
   <style type="text/css">@import'ie6BradHack.css';</style>
  
  <![endif]-->

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

 
  <!--[if lt IE 7]>
  
   我是 IE6 才會執行
  
  <![endif]-->
  
  <!--[if IE]>
  
   IE 才會執行的內容
  
  <![endif]-->
  
  <!--[if gte IE 8]>
  
   只有IE8以上(包含IE8)才會執行內容
  
  <![endif]-->
  
  <!--[if !IE]>-->
  
  <p>您正在使用的瀏覽器不是 ie 。
  </p>
  
  <!--<![endif]-->