区分IE8/IE7/IE6及其他浏览器
在 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字体色将为蓝色
提示:CSS HACK书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！
以下代码之间的空格是必要的，缺少空格导致失效
/*---------------------------------媒体查询hack [[---------------------------------*/
/* 只支持IE6、7 */ @media screen\9 {...} /* 只支持IE8 */ @media \0screen {...} /* 只支持IE6、7、8 */ @media \0screen\,screen\9 {...} /* 只支持IE8、9、10 */ @media screen\0 {...} /* 只支持IE9、10 */ @media screen and (min-width:0\0) {...} /* 只支持IE10 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...} /* 支持IE9、Chrome、Safari、Firefox、 Opera */ @media all and (min-width:0){...} /* 只支持wekit内核浏览器Chrome、Safari */ @media screen and (-webkit-min-device-pixel-ratio: 0) {...} /* 只支持Opera */ @media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {...} /* 只支持Firefox */ @-moz-document url-prefix() {...}
例如：
<p class="class">@hack@hack@hack@hack@hack@hack</p> <style type="text/css"> @media all and (min-width:0){ /* 在IE9文本颜色为红色*/ .class{color:#F00;} } @media screen and (-webkit-min-device-pixel-ratio: 0) { /* 在Chrome、Safari中文本颜色为绿色 */ .class{color:#0F0;} } @media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { /* 在Opera中文本颜色为蓝色 */ .class{color:#00F;} } @-moz-document url-prefix() { /* 在Firefox中文本颜色为品红色 */ .class{color:#F0F;} } </style>
/*---------------------------------媒体查询hack ]]---------------------------------*/
/*---------------------------------选择器hack [[---------------------------------*/
/* 只支持IE7 */ html* 选择器{} /* 仅支持IE7 使用该选择器需要HTML顶部有声明：<!DOCTYPE HTML ......>*/ *+html 选择器{} /* 只支持IE6 */ *html 选择器{}
如:
<p class="class">选择器hack选择器hack选择器hack选择器hack选择器hack选择器hack</p> html* .class{color:#F00;} /* 在IE7中文本颜色为红色 */ *+html .class{color:#0F0;} /* 在IE7中文本颜色为绿色 */ *html .class{color:#00F;} /* 在IE6中文本颜色为蓝色 */
/*---------------------------------选择器 hack ]]---------------------------------*/
/*---------------------------------属性hack [[---------------------------------*/
/* 只支持IE6、7、8、9、10 */
选择器{属性：属性值\9;}
/* 只支持IE8、9、10 */
选择器{属性：属性值\0;}
/* 支持IE8的部分属性值、完全支持IE9、10 */
选择器{属性：属性值\9\0;}
/* 仅支持IE7和IE6 */
选择器{*属性：属性值;}
/* 只支持IE6 */
选择器{_属性：属性值;}
/* 只不支持IE6 */
选择器{属性：属性值!important;}
/* 仅支持Safari和Chrome ，且只能放在选择器的最后一个属性，因为当浏览器解析[;;]后，不会再读取后面属性 */
选择器{[;属性:属性值;]}
如：
<p class="class">属性hack属性hack属性hack属性hack属性hack属性hack</p> <style type="text/css"> .class{ color:#F00\0;/* 在IE8和IE9中文本颜色为红色 */ *color:#0F0; /* 在IE7中文本颜色为绿色 */ _color:#00F; /* IE6中颜色为蓝色 */ [;color:#F0F;]/* 在Safari和Chrome中颜色为品红色 */ } </style>
建议是：尽量写出无hack的结构和样式，做到可以向后兼容，减少多余代码，更加可以体现自己专业化的态度。
如果 觉得文章不错，可以请博主喝一杯奶茶哦！！！
