text IE CSS Hacks All - IE6,7,8,9,10,11,Edge

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text IE CSS Hacks All - IE6,7,8,9,10,11,Edge相关的知识,希望对你有一定的参考价值。

	" Make IE Better Compatible "

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

======================================================
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 :/


IE8 and IE9 (TOTALLY NOT NEEDED - I LEFT HERE FOR REFERENCE ONLY)
==================
.selector { color:#f00\9; } - http://stackoverflow.com/questions/660652/ie8-css-selector

The above solution doesn't work with font-family, so instead you need to use "\0/ !important"
Example: { font-family:Arial \0/ !important; }			
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

Also, using "\9" is picked up by IE10 and IE11 so you need to redeclare the CSS rules with "-ms-high-contrast:". See info below.

IE9 Only
==================
:root .class/#id { property:value \0/IE9; }
**NOTE**: Prepos v4.0.1 shoots out an error when compiling the CSS if you use this hack :/
http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx
		 
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   (Method 1)
==================
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.selector { property:value; }
}
---------------------------------

IE10 and IE11   (Method 2)
==================
@media all and (-ms-high-contrast:none){
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
}
---------------------------------

/*----MS Edge Browser CSS Start----*/
@supports (-ms-accelerator:true) {
	.selector { property:value; } 
	.edu_input_field{ width:15.1% !important; }
}
/*----MS Edge Browser CSS End----*/
---------------------------------

以上是关于text IE CSS Hacks All - IE6,7,8,9,10,11,Edge的主要内容,如果未能解决你的问题,请参考以下文章

text IE CSS Hacks All - IE6,7,8,9,10,11,Edge

text IE CSS Hacks - IE6,7,8,9,10,11,Edge

css IE,CSS:CSS Hacks IE6-IE9

可接受的 CSS hacks/修复

[CSS] IE Style Target

针对 IE的 的优化