处理浏览器兼容 各个浏览器的标识 hack

Firefox 浏览器

@-moz-document url-prefix() { 

  .selector {  

      property: value; 

    } 

支持所有Gecko内核的浏览器 (包括Firefox)

*>.selector { property: value; } 

Webkit 内核浏览器 

@media screen and (-webkit-min-device-pixel-ratio: 0) { 

 Selector { 

   property: value; 

  } 

Opera 浏览器

html:first-child>body Selector {property:value;} 

IE 浏览器针对不同的版本有不同个Hack方式。

CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等

选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

方式一:HTML头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

1. <!--[if !IE]> 除IE外都可识别 <!--<![endif]-->

2. <!--[if IE]> 所有的IE可识别 <![endif]-->

3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->

4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->

5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->

6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->

7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->

10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->

11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别<![endif]-->

 (2)方式二 类内属性前缀法

    说明:在标准模式中
  • “-″减号是IE6专有的hack
  • “9″ IE6/IE7/IE8/IE9/IE10都生效
  • “″ IE8/IE9/IE10都生效,是IE8/9/10的hack
  • “9″ 只对IE9/IE10生效,是IE9/10的hack

(3)CSS hack方式三:选择器前缀法

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen9{...}只对IE6/7生效
@media screen {body { background: red; }}只对IE8有效
@media screen\,screen9{body { background: blue; }}只对IE6/7/8有效
@media screen {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等
 

IE 9   

:root Selector {property: value9;} 

IE 9-

Selector {property: value9;} 

IE 8    

Selector {property: value/;} 

或: 

@media screen { 

 Selector {property: value;} 

IE 8  +

Selector {property: value0;} 

IE 7

+html Selector{property:value;} 

或: 

*:first-child+html Selector {property:value;} 

IE 7-

Selector {*property: value;} 

IE 6

Selector { 

 _property: value; 

或者: 

*html Selector { 

  property: value; 

例如:

div{
 background:green;/*forfirefox*/
 *background:red;/*forIE6*/(bothIE6&&IE7)
}
比如要分辨IE6和firefox两种浏览器,可以这样写:
 
我在IE6中看到是红色的,在firefox中看到是绿色的。
解释一下:
上面的css在firefox中,它是认识不了后面的那个带星号的东西是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;*background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。
CSS hack:区分IE6,IE7,firefox
 
区别FF,IE7,IE6:
background:orange;*background:green;_background:blue;
background:orange;*background:green!important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*;不能识别 !important;
IE7能识别*,能识别!important;
FF不能识别*,但能识别!important;
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
以: " #demo {100px;} "为例;
#demo {100px;} /*被FIREFOX,IE6,IE7执行.*/
* html #demo {120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {130px;} /*会被IE7执行*/
所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;
IE8 最新css hack:
"9" 例:"border:1px 9;".这里的"9"可以区别所有IE和FireFox.(只针对IE9 Hack)
"" IE8识别,IE6、IE7不能.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
 
 

 

 

 

 

 

一分耕耘,一分收获
原文地址:https://www.cnblogs.com/sure2016/p/5895154.html