IE CSS hacks - IE6, 7, 8, 9, 10, 11
没有测试过得hack(ie6-ie8)
==================
IE6 Only
==================
_selector {...}
IE6 & IE7
==================
*html or { _property: }
IE7 Only
==================
*+html or { *property: } - Keep in mind that you have to put the IE7 property first within the same selector.
IE8
==================
.selector/*\**/ { color:#f00; }
**NOTE**: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/
测试所得正确的hack(ie8-ie11 网上找的方法 其他网上文章都是不准确的)
<:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::>
.aClass {
color: blue;
_color: red; /* ie6 only */}
.bClass {
color: blue;
* color: green; /* ie6 and ie7 only */}
.cClass,#notie8#hack { /* ie7, ie9, ie10, ie11+ only 在不是ie的浏览器比如chrome,firefox也会有效果,所以不予考虑次方案*/
color: white;}
.dClass {
color: blue;
color: yellow\9; /* ie7, ie8, ie9 and ie10 only */
/* 碰到!important的话\9\0写在前面 */
}
.eClass {
color: blue;
color: purple\0; /* ie8, ie9, ie10, ie11 only */
/* 碰到!important的话\9\0写在前面 */
}
.fClass {
color: blue;
color: black\9\0; /* ie8, ie9, ie10 only */
/* 碰到!important的话\9\0写在前面 */
}
.gClass {
color: blue;
color: orange\0/; /* ie8, ie9, ie10 only */
/* 碰到!important的话\9\0写在前面 */
}
.hClass {
color: blue;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* ie10, ie11+ */
.hClass {
color: pink;}
}
<:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::>
IE10 Only
==================
Method 1: UA Sniffing, which isn't the most loved method to target browsers, but here it is anyway.
http://css-tricks.com/ie-10-specific-styles/
Place this script in the <head>:
<script>
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>
Usage:
html[data-useragent*='MSIE 10.0'] .selector {...}
Method 2: It used 'Conditional compilation' which is not UA sniffing. Also, it excludes IE11 as well.
http://www.impressivewebs.com/ie10-css-hacks/
Conditional compilation: https://msdn.microsoft.com/en-us/library/8ka90k2e(v=vs.94).aspx
Place this script in the <head>:
<!--[if !IE]><!-->
<script>
if (/*@cc_on!@*/false && document.documentMode === 10) {
document.documentElement.className+=' ie10';
}
</script>
<!--<![endif]-->
Note: Seems the Conditional Comment is not necessary, but I like to include it for godo measure.
Usage:
.ie10 .selector {...}
== More info here: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/
IE10 and IE11
==================
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.selector { property:value; }
}