如何为IE9单独定义特定的CSS规则？ [英] How to define specific CSS rules for IE9 alone?

问题描述

朋友，请帮我定义IE9的特定CSS规则吗？
例如像这样

  / * IE 6 fix * / 
 * html .twit-post。 delete_note a {background-position-y：2px; } 
 * html .twit-post .delete_note a：hover {background-position-y：-14px; }注意接受的答案也针对IE10。

因此，对于更完整的列表：

IE 6

  * html .ie6 {property：value;} 
  

或

  .ie6 {_property：value;} 
  

IE 7

  * + html .ie7 {property：value;} 
  

或

  *：first-child + html。 ie7 {property：value;} 
  

IE 6和7

  @media screen\9 {
 .ie67 {property：value;} 
} 
  

或

  .ie67 {* property：value; } 
   

或

  .ie67 {#property：value;} 
  

IE 6,7和8

  @media \0screen\，screen\9 {
 .ie678 {property：value;} 
} 
  

IE 8

  html> / ** / body .ie8 {property：value;} 
  

或

  @media \0screen {
 .ie8 {property：value;} 
} 
  

IE 8仅限标准模式

  .ie8 {property / * \ ** /：value\9} 
  

$ b b

IE 8,9和10

  @media screen\0 {
 .ie8910 { value;} 
} 
  

仅IE 9

  @media屏幕和（最小宽度：0）和（最小分辨率：.001dpcm）{
 // IE9 CSS 
 .ie9 { property：value;} 
} 
  

IE 9及更高版本

  @media screen and（min-width：0）and（min-resolution：+ 72dpi）{
 // IE9 + CSS 
 .ie9up {property：value;} 
} 
  

IE 9和10

  @media screen and（min-width：0）{
 .ie910 {property：value;} 
} 
  

仅限IE 10

  _： -  ms-lang（x），.ie10 {property：value\9; } 
  

IE 10及以上

  _： -  ms-lang（x），.ie10up {property：value; } 
   

或

  @media all和（-ms-high-contrast：none），（-ms-high-contrast：active）{
 .ie10up {property：value;} 
} 
  

IE 11（及以上..）

  _： -  ms-fullscreen，：root .ie11up {property：value; } 
  

---

Javascript替代品

Modernizr

Modernizr在页面加载时快速运行以检测功能;然后
创建一个带有结果的JavaScript对象，并向
html元素添加类

用户代理选择

Javascript：

  var b = document.documentElement; 
 b.setAttribute（'data-useragent'，navigator.userAgent）; 
 b.setAttribute（'data-platform'，navigator.platform）; 
 b.className + =（（!!（'onuchstart'in window）|| !!（'onmsgesturechange'in window））？'touch'：''）; 
  

将以下内容添加到 html 元素：

  data-useragent ='Mozilla / 5.0（兼容; MSIE 9.0; Windows NT 6.1; Trident / 5.0; SLCC2 ; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C）'
 data-platform ='Win32'
  
 
 
 
允许非常targetted的CSS选择器，例如：
  html [data-useragent * ='Chrome / 13.0'] .nav {
 background：url（img / radial_grad.png） 
} 
  
 
 
 
 
 
 
 Footnote 
 
 
 
如果可能，请避免指定浏览器。识别并解决您识别的任何问题。支持 渐进增强 和 正常降级 。考虑到这一点，这是一个理想的世界场景，在生产环境中不总是可以获得的，因此上述内容应该有助于提供一些好的选择。
 
 
 
 
 
 
归因/基本阅读
 
 
 
 
 
  
 
  Paul Irish  
 
 
  Web虔诚 
 
 
 扳手 
 
 
 
Friends, please help me in defining specific css rule for IE9?
For example like this
/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }

解决方案
Note the accepted answer also targets IE10. As such, for a more complete list:

IE 6

* html .ie6 {property:value;}
or
.ie6 { _property:value;}


IE 7

*+html .ie7 {property:value;}
or
*:first-child+html .ie7 {property:value;}


IE 6 and 7

@media screen\9 {
    .ie67 {property:value;}
}
or
.ie67 { *property:value;}
or
.ie67 { #property:value;}


IE 6, 7 and 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}


IE 8

html>/**/body .ie8 {property:value;}
or
@media \0screen {
    .ie8 {property:value;}
}


IE 8 Standards Mode Only

.ie8 { property /*\**/: value\9 }


IE 8,9 and 10

@media screen\0 {
    .ie8910 {property:value;}
}


IE 9 only

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}


IE 9 and above

@media screen and (min-width:0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}


IE 9 and 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}


IE 10 only

_:-ms-lang(x), .ie10 { property:value\9; }


IE 10 and above

_:-ms-lang(x), .ie10up { property:value; }
or
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}


IE 11 (and above..)

_:-ms-fullscreen, :root .ie11up { property:value; }




Javascript alternatives

Modernizr


  
Modernizr runs quickly on page load to detect features; it then
  creates a JavaScript object with the results, and adds classes to the
  html element


User agent selection

The Javascript:
var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Adds (e.g) the below to the html element:
data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Allowing very targetted CSS selectors, e.g.:
html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}




Footnote

If possible, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancement and graceful degradation.  With that in mind, this is an 'ideal world' scenario not always obtainable in a production environment, as such- the above should help provide some good options.



Attribution / Essential Reading


Keith Clarke
Paul Irish
Web Devout
The Spanner


                        
这篇关于如何为IE9单独定义特定的CSS规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！