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]-->
大致上是這樣，如果有任何問題，可以提出來一起討論，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 註解的語法
分享到：
相关推荐
针对firefox ie6 ie7 ie8的css样式hack
IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例
解决IE6 IE7 Firefox中li兼容问题
CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8 CSS 浏览器兼容
淘宝SDK模块代码 能兼容ie6ie7ie8以及firefox的css透明滤镜
CSS Hack兼容大全,令网页能正常显示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器上
你可以在ie6、ie7、ie8、ie9、ie10、firefox、google chrome浏览器中看到不同的效果，测试兼容性。只针对ie以及Gecko内核、WebKit内核。
IE6、IE7、IE8、Firefox、Chrome、Safari的CSS hack兼容一览表
兼容firefox火狐、IE6IE7IE8加入收藏，设为首页代码
IE6、_IE7、IE8、Firefox兼容性问题IE6、_IE7、IE8、Firefox兼容性问题IE6、_IE7、IE8、Firefox兼容性问题IE6、_IE7、IE8、Firefox兼容性问题
IE6、IE7、Firefox之间的兼容写法IE6、IE7、Firefox之间的兼容写法
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。
Firefox3,IE6,IE7,IE8上传本地图片预览
CSS在IE6, IE7, IE8, Firefox中的特定使用(Hack).
简单CSShack：区分IE6、IE7、IE8、Firefox、Opera().pdf
纯CSS的下拉菜单 支持IE6 IE7 Firefox
Js图片广告轮换效果[支持ie7,ie8.firefox,ie6]
1.区别IE和非IE浏览器CSS HACK代码 复制代码代码如下:#divcss5{background:blue;... /*Firefox 背景变蓝色*/background:red \9; /*IE8 背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange;
Javascript的IE和Firefox(火狐)兼容性解决方案
解决IE6、IE7、IE8、Firefox兼容的两种方案