jimdev5277
11/12/2015 - 5:37 AM

IE CSS hacks - IE6, 7, 8, 9, 10, 11

IE CSS hacks - IE6, 7, 8, 9, 10, 11

ie67891011-css-hacks.txt
content_copyfile_download
没有测试过得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; }
}