CSS的IE6、IE7、FF兼容性写法

时间：2022-05-12 18:50:17
blue;< /td> Firefox 背景变蓝色
red /9; IE8 背景变红色
*black;< /td> IE7 背景变黑色
_background:orange; IE6 背景变橘色

 

 #example { color: #333; } /* Moz */

* html #example { color: #666; } /*IE6 */

*+html #example { color: #999; } /* IE7 */

  1. color:red; /* 所有浏览器都支持 */  
  2.    
  3. color:red !important; /* 除IE6外 */  
  4.    
  5. _color:red; /* IE6支持 */  
  6.    
  7. *color:red; /* IE6、IE7支持 */  
  8.    
  9. +color:red; /*IE7支持*/  
  10.    
  11. *+color:red; /* IE7支持 */  
  12.    
  13. color:red\9; /* IE6、IE7、IE8、IE9支持 */  
  14.    
  15. color:red\; /* 针对所有IE */  
  16.    
  17. color:red\0; /* IE8、IE9支持 */  
  18.    
  19. color:red\9\0; /*IE9支持*/  
  20.    
  21. /* webkit and opera */  
  22.    
  23. @media all and (min-width: 0px){ div{color:red;} }  
  24.    
  25. /* webkit */  
  26.    
  27. @media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }  
  28.    
  29. /* opera */  
  30.    
  31. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { div{color:red;} }  
  32.    
  33. /* firefox * /  
  34.    
  35. @-moz-document url-prefix(){ div{color:red;} } /* all firefox */  
  36.  
  37. html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest firefox */  
  38.  
  39. body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */  
  40.    
  41. <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> 
  42.    
  43. <!--[if IE 7 ]> <html class="ie7"> <![endif]--> 
  44.    
  45. <!--[if IE 8 ]> <html class="ie8"> <![endif]--> 
  46.    
  47. <!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
  48.    
  49. <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]--> 
  50.    
  51. <!-[if IE 7]> = 等于 IE7  
  52.    
  53. <!-[if lt IE 8]> = 小于 IE8（就是 IE7 或以下了啦）  
  54.    
  55. <!-[if gte IE 8]> = 大于或等于 IE8   
  56.  
  57. <meta http-equiv="x-ua-compatible" content="ie=7" /> 
  58.    
  59. 把这段代码放到<head>里面，在ie8里面的页面解析起来就跟ie7一模一样的了  
  60.    
  61. <!-[if IE]> 
  62.    
  63. <link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" /> 
  64.    
  65. <![endif]-> 
  66.    
  67. <!-[if lt IE 8]> 
  68.    
  69. <link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /> 
  70.    
  71. <![endif]-> 
  72.    
  73. <!-[if IE 7]> 
  74.    
  75. <link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" /> 
  76.    
  77. <![endif]-> 
  78.    
  79. <!-[if IE 6]> 
  80.    
  81. <link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" /> 
  82.    
  83. <![endif]-> 

IE6以下

*html{}

IE 7 以下

*:first-child+html {} * html {}

只对IE 7

*:first-child+html {}

只对IE 7 和现代浏览器

html>body {}

只对IE 8（属性值后加/0）

.name {color:#ccc/0; }

只对现代浏览器(非IE 7)

html>/**/body {}

最新的Opera 9以下版本

html:first-child {}

Safari

html[xmlns*=”"] body:last-child {}

Firefox 3

.classname, x:-moz-any-link, x:default {}

#id, x:-moz-any-link, x:default {}

 

====================

所有浏览器下背景变灰（半透明）

body {filter:alpha(opacity=30);opacity:0.3;}

====================

区别IE6与FF：

background:orange;*blue;< /p>

区别IE6与IE7：

background:green !important;blue;< /p>

区别IE7与FF：

background:orange; *background:green;

区别FF，IE7，IE6：

background:orange;*background:green !important;*blue;< /p>

区别FF 3

“{”前加上“, x:-moz-any-link, x:default”，只有FF 3能识别

 

注:

IE都能识别*；标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

只有IE8能识别/0

FF不能识别*，但能识别!important;

标签：

相关文章