IE8的css hack 9 使用说明
|
副标题[/!--empirenews.page--]
首先感谢“丸子”提供的这个IE8的css hack； .test{ color:#000000; /* FF,OP支持 */ color:#0000FF9; /* 所有IE浏览器(ie6+)支持 ；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */ [color:#000000;color:#00FF00; /* SF,CH支持 */ *color:#FFFF00; /* IE7支持 */ _color:#FF0000; /* IE6支持 */ } 包括我自己也是使用这种的，这是我前段时间整理的《主流浏览器的一些CSS hack》。 color:#0000FF9; ;/*ie6,ie7,ie8*/ 来区分IE的各个版本。 说明：在标准模式中 测试代码 <script type="text/javascript"> //alert(document.compatMode); </script> <style type="text/css"> body:nth-of-type(1) .iehack{ color: #F00;/* 对Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ，选择器也适用几乎全部Mobile/Linux/Mac browser*/ } .demo1,.demo2,.demo3,.demo4{ width:100px; height:100px; } .hack{ /*demo1 */ /*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/ background-color:red; /* All browsers */ background-color:blue !important;/* All browsers but IE6 */ *background-color:black; /* IE6, IE7 */ +background-color:yellow;/* IE6, IE7*/ background-color:gray9; /* IE6, IE7, IE8, IE9, IE10 */ background-color:purple ; /* IE8, IE9, IE10 */ background-color:orange9 ;/*IE9, IE10*/ _background-color:green; /* Only works in IE6 */ *+background-color:pink; /* WARNING: Only works in IE7 ? Is it right? */ } /*可以通过javascript检测IE10，然后给IE10的<html>标签加上class=”ie10″ 这个类 */ .ie10 #hack{ color:red; /* Only works in IE10 */ } /*demo2*/ .iehack{ /*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 IE6显示为：绿色， IE7显示为：黑色， IE8显示为：红色， IE9显示为：蓝色， Firefox/Chrome显示为：橘色， （本例IE10效果同IE9,Opera最新版效果同IE8） */ background-color:orange; /* all - for Firefox/Chrome */ background-color:red ; /* ie 8/9/10/Opera - for ie8/ie10/Opera */ background-color:blue9 ; /* ie 9/10 - for ie9/10 */ *background-color:black; /* ie 6/7 - for ie7 */ _background-color:green; /* ie 6 - for ie6 */ } /*demo3 实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 IE6显示为：红色， IE7显示为：蓝色， IE8显示为：绿色， IE9显示为：粉色， Firefox/Chrome显示为：橘色， （本例IE10效果同IE9，Opera最新版效果也同IE9为粉色） */ .element { background-color:orange; /* all IE/FF/CH/OP*/ } .element { *background-color: blue; /* IE6+7, doesn't work in IE8/9 as IE7 */ } .element { _background-color: red; /* IE6 */ } .element { background-color: green ; /* IE8+9+10 */ } :root .element { background-color:pink ; } /* IE9+10 */ /*demo4*/ /* 该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特别要注意顺序 IE6显示为：橘色， IE7显示为：粉色， IE8显示为：黄色， IE9显示为：紫色， IE10显示为：绿色， Firefox显示为：蓝色， Opera显示为：黑色， Safari/Chrome显示为：灰色， */ .hacktest{ background-color:blue; /* 都识别，此处针对firefox */ background-color:red9; /*all ie*/ background-color:yellow ; /*for IE8/IE9/10 最新版opera也认识*/ +background-color:pink; /*for ie6/7*/ _background-color:orange; /*for ie6*/ } @media screen and (min-width:0){ .hacktest {background-color:black ;} /*opera*/ } @media screen and (min-width:0) { .hacktest { background-color:purple9; }/* for IE9/IE10 PS:国外有些习惯常写作 ，根本没考虑Opera也认识 的实际 */ } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .hacktest { background-color:green; } /* for IE10+ 此写法可以适配到高对比度和默认模式，故可覆盖所有ie10的模式 */ } @media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} } /*for Chrome/Safari*/ /* #963棕色 :root is for IE9/IE10, 优先级高于@media, 慎用！如果二者合用，必要时在@media样式加入 !important 才能区分IE9和IE10 */ /* :root .hacktest { background-color:#9639; } */ </style> 更多的介绍可以参考这篇文章：https://www.jb51.net/css/493362.html 至于为什么使用“9”我真的不清楚原因，但是“丸子”测试了其他0-13的数字，最终结果如下： （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
