本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象HACK原理:不同浏览器对各中字符的识别不同 (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同)
在 CSS中常用特殊字符识别表:
(1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;
(2)!important: 除IE6不能识别 !important外, FF+IE8+IE7都能识别!important ;
(3)_ : 除IE6支持_ 外, FF+IE8+IE7都不支持_;
(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)
示例:
(1)区别FF(IE8)与IE6 IE7
backgorund:orange; FF 和IE8背景色将为橘黄色
*backgorund:red; IE6和IE7背景色将为红色
(2)区别 FF(IE8)与IE6与IE7
background:orange; FF和IE8背景色将为橘黄色
*background:red !important; IE7背景色将为红色
*background:blue; IE6背景色将为蓝色
(3) 区别FF(IE8)与IE6与IE7
background:orange; FF和IE8背景色将为橘黄色
*background:red; IE7 背景色将为红色
_background:blue; IE6背景色将为蓝色
(4)区别FF与IE6 IE7 E8
color:gray; FF 等非IE浏览器字体色将为灰色
color:red\9; IE8 IE9字体色将为红色
*color:green; IE7 字体色将为绿色
_color:blue; IE6 字体色将为蓝色
.lanyu{
padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
}
提示:
CSS HACK书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！
总结:
实际运用中我感觉比较少用到!important ,只要你记住”*”和”_”我想就足够区别于FF(IE8)与IE6与IE7了.
.sofish{ padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 目前应用于IE8的单独 hack，情况比较少 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */ }
/* webkit and opera */ @media all and (min-width: 0px){ .sofish{padding:11px;} }
/* webkit */ @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
/* opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
/* firefox * / @-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */ html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */
HTML: 添加body class
<!–[if IE6]–><body class=”ie6″><![endif]–>
<!–[if IE7]–><body class=”ie7″><![endif]–>
<!–[if IE8]–><body class=”ie8″><![endif]–>
<!–[if IE9]–><body class=”ie9″><![endif]–>
<!–[if !IE]–><body class=”non-ie”><![endif]–>
==================================================
演示代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>DIV+CSS各浏览器css hack测试,www.divcss5.com测试</title>
<style type=”text/css”>
<!–
.STYLE1 { font-size:18px;color:#FF0000;*color:#00FF00 !important;color:#0000FF \9;*color:#FFFF00;}
.STYLE2,.STYLE3,.STYLE4,.STYLE5{ font-size:14px;}
.STYLE2 {color: #FFFF00}
.STYLE3 {color: #FF0000}
.STYLE4 {color: #00FF00}
.STYLE5 {color: #0000FF}
–>
</style>
</head>
<body>
<span>我是测试颜色，不在不同浏览器下显示颜色不同哦！-<a href=”http://www.divcss5.com/”>DIV+CSS</a></span><br /> www.divcss5.com版权所有
<span>我是颜色在IE6显示</span> <br />
<span>我是颜色在ie7显示</span> <br />
<span>我是颜色在ie8显示</span> <br />
<span>我是颜色在火狐（firefox）显示</span>
</body>
</html>
参考资料：
http://hi.baidu.com/marsjin/blog/item/fd4c10d19b0e64c6562c84c2.html
http://www.divcss5.com/css-hack/c27.html
