.Index_bottom { } /*通用*/
@media screen and (min-width:0) {.Index_bottom { display:none\9; }/* for IE9/IE10 */ }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .Index_bottom { display:block; }/* for IE10 */ }
针对IE8的css hack
之前对css hack做过一个简单的汇总《CSS hack 汇总》,现在进行一些更新:
“\9″ 只在IE6/IE7/IE8/IE9/IE10下生效
“\0” 只在 IE8/IE9/IE10下生效
“\9\0”只在IE9/IE10下生效
故目前如果需要只针对ie8的hack,可先使用在IE8/IE9/IE10生效的“\0”,再用仅在IE9/IE10生效的“\9\0”hack覆盖之前的样式。
如
selector{
color:#000;
color:#F00\0; /* only for IE8&IE9&IE10 */
color:#000\9\0; /* only for IE9&IE10 */
}
1, IE条件注释法,微软官方推荐的hack方式。
selector{
background-color:#f00;/*all*/
background-color:#0ff\0;/* ie 8/9 */
background-color:#0f0\9\0;/* ie9 */
*background-color:#00f;/*ie7*/
+background-color:#00f; /*ie7*/
_background-color:#ff0;/*ie6*/
background-color//:#090;/*非IE*/
background-color:#900\0;/*所有ie*/
}
border:2px solid #00f; /*IE、ff的属性*/
border:2px solid #090\9; /* IE6/7/8的属性 */
border:2px solid #F90\0; /* IE8支持 */
*border:2px solid #F00; /* IE6、7支持 */
_border:2px solid #f00; /*IE6的属性*/
CSS hack:针对IE6,IE7,firefox显示不同效果
做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要。
区别不同浏览器的CSS hack写法:
区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange; *background:green!important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
------------------------------------------------------
另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。
IE6 IE7 FF
* √ √ ×
!important × √ √
_ √ × ×
于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
CSS HACK
以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
注意: *+html 对IE7的HACK 必须保证HTML顶部有如下声明:
《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"》
.opacity{
filter:alpha(opacity=50);/*IE*/
-moz-opacity:0.5;/*老版Mozilla*/
-khtml-opacity:0.5;/*老版Safari*/
opacity:0.5;/*支持opacity的浏览器*/}