һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+

IE10 CSS Hack˳IE11CSS Hack

[]
16270 websjy 2014-4-11 12:52:50
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x

IEhackIE9css hackIE8css hackϴͬ˵һҳIE10⣬IE9²һ£Ҳͬ⡣˸ϽIE10hack

googleϷIE10 CSS Hacks Ƚʵõġ¼һԱá

һԼ⣺@cc_on

ǿIE˽е(conditional compilation)עṩie10HackýűIEųעͣȷIE6-9Ȼܼ⵽Ϊ@ cc_on


  1. <!--[if !IE]><!--><script>
  2. if (/*@cc_on!@*/false) {
  3.     document.documentElement.className+=' ie10';
  4. }
  5. </script><!--<![endif]-->
ƴ



ע/*@cc_on ! @*/м̾š

Ϳie10иhtmlԪһclass=ie10壬Ȼie10ʽжѡ£

  1. .ie10 .example {
  2.    /* IE10-only styles go here */
  3. }
ƴ




ie10׼ģʽµĽͼ


012.png   


ie10IE8ģʽµĽͼ


022.png


¼ԺIE汾IE11jsԸһ£

  1. if (/*@cc_on!@*/false) {
  2.     document.documentElement.className+=' ie' + document.documentMode;
  3. }
ƴ



document.documentModeԲ鿴IEdocumentModeԣIE8+

ˣʵϾԤIE11Ѿ֧@ cc_on䣬֪ʽ᲻֧֡IE11һ¡޸Ĵ룺


  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ޱĵ</title>
  6.     <!--[if !IE]><!-->
  7.     <script>
  8.         // IE10
  9.         if (/*@cc_on!@*/false) {
  10.             document.documentElement.className += ' ie' + document.documentMode;
  11.         }
  12.         // IE11IE
  13.         // ΪIE11document.documentModeΪ11htmlǩϻie11ʽࣻ
  14.         // IEdocument.documentModeΪundefinedhtmlǩϻieundefinedʽࡣ
  15.         if (/*@cc_on!@*/true) {
  16.             document.documentElement.className += ' ie' + document.documentMode;
  17.         }
  18.     </script>
  19.     <!--<![endif]-->
  20.     <style type="text/css">
  21.         .ie10 .testclass {
  22.             color: red
  23.         }
  24.         .ie11 .testclass {
  25.             color: blue
  26.         }
  27.         .ieundefined  .testclass {
  28.             color: green
  29.         }
  30.     </style>
  31. </head>

  32. <body>
  33. <div>
  34.     test text!
  35. </div>
  36. </body>
  37. </html>
ƴ



У

  1. if (/*@cc_on!@*/true) {
  2.     document.documentElement.className += ' ie' + document.documentMode;
  3. }
ƴ



ϴIE11IEΪ:

  • IE11document.documentModeΪ11htmlǩϻie11ʽࣻ
  • IEdocument.documentModeΪundefinedhtmlǩϻieundefinedʽࡣ

IE11ҲֳˣIE11ԤµĽͼ


031.png


ǺǣYYIE11ʽ滹֪ʲôӣʵʵĿIE𽥱׼IE11IE10ܺòcss hack


@media -ms-high-contrast

IE10֧ýѯȻҲ֧-ms-high-contrastԣԣǿHack IE10

  1. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  2.    /* IE10-specific styles go here */
  3. }
ƴ




д䵽߶ԱȶȺĬģʽԿԸǵie10ģʽˡַʽԤIE11ҲЧ

ȻҲԺͷһһã

  1. if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
  2.     document.documentElement.className += "ie10";
  3. }
ƴ



@media 0

̫ΪIE9ԤIE11Ҳ֧media͵hack

  1. @media screen and (min-width:0\0) {
  2.     /* IE9 , IE10 ,IE11 rule sets go here */
  3. }
ƴ


֮IE𽥱׼IE11IE10ܺòcss hackҲգǺǡ

תԣhttp://www.css88.com/archives/4710
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-1-22 05:49

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б