css hack--IE6、IE7、IE8、FF浏览器之间的兼容性的解决方法总结

1、为什么在IE6设置margin会出现距离加倍的状况

问题症结：在div中设置float属性后，IE6中margin距离加倍。

代      码：div{

float:left;

margin-left:5px;  /*IE6浏览器解释成margin-left:10px;*/

}

解决方案：在div样式中设置display:inline;

 

2、怎么能让FF像IE6一样在固定了层的高度后能够根据文本的内容自动增加层的高度

问题症结：在IE6中设置div的高度后，当div中的内容超过层的高度，div会自动被文本撑开

代      码：div{

height:200px;    /*FF不会根据内容自动增加高度，IE6中层的高度会自动增加*/

}

解决方案：

div{

height:auto!important;height:200px;min-height:200px;

}

 

3、IE中为什么图片下部会留有空隙

问题症结：IE中图片下部会留有一小部分空隙

解决方案：设置图片display:block;

 

4、CSS属性hack

解决方案：

{

padding:10px;    /*所有浏览器*/

padding:10px/9;  /*所有IE浏览器*/

padding:10px/0;  /*IE8、IE9*/ 

*padding:10px;   /*IE6、IE7*/

+padding:10px;  /*IE7*/

_padding:10px;  /*IE6*/

}

 

#example{} /*所有浏览器*/

* html #example{}  /*IE6*/

*+html #example{} /*IE7*/

 

 

5、IE注释hack

<!--[if IE]-->only ie<![endif]-->

<!--[if !IE]-->not ie<![endif]-->

 

6、全面的CSS样式hack

1. /***** Selector Hacks ******/  
2. /* IE6 and below */  
3. * html #uno   {  color :  red  } 
4.  
5. /* IE7 */  
6. *:first-child+html #dos  {  color :  red  }  
7.  
8. /* IE7, FF, Saf, Opera  */  
9. html>body #tres  {  color :  red  } 
10.  
11. /* IE8, FF, Saf, Opera (Everything but IE 6,7) */  
12. html>/**/ body  #cuatro  {  color :  red  } 
13.  
14. /* Opera 9.27 and below, safari 2 */  
15. html:first-child #cinco  {  color :  red  } 
16.  
17. /* Safari 2-3 */  
18. html[xmlns*="" ] body:last-child  #seis  {  color :  red  } 
19.  
20. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */  
21. body:nth-of-type(1 )  #siete  {  color :  red  } 
22.  
23. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */  
24. body:first-of-type #ocho  {   color :  red  } 
25.  
26. /* saf3+, chrome1+ */  
27. @media screen  and (-webkit-min-device-pixel-ratio: 0 ) { 
28.         #diez   {  color :  red   } 
29. } 
30.  
31. /* iPhone / mobile webkit */  
32. @media screen  and (max-device- width :  480px ) { 
33.         #veinti seis {  color :  red   } 
34. } 
35.  
36. /* Safari 2 - 3.1 */  
37. html[xmlns*="" ]:root  #trece   {  color :  red   } 
38.  
39. /* Safari 2 - 3.1, Opera 9.25 */  
40. *|html[xmlns*="" ]  #catorc e {  color :  red   } 
41.  
42. /* Everything but IE6-8 */  
43. :root *> #quince  {  color :  red   } 
44.  
45. /* IE7 */  
46. *+html #diecio cho {   color :  red  } 
47.  
48. /* Firefox only. 1+ */  
49. #veinti cuatro,  x:-moz-any-link  {  color :  red  } 
50.  
51. /* Firefox 3.0+ */  
52. #veinti cinco,  x:-moz-any-link, x: default   {  color :  red   } 
53.  
54.  
55. /***** Attribute Hacks ******/  
56. /* IE6 */  
57. #once  {  _color :  blue  } 
58.  
59. /* IE6, IE7 */  
60. #doce  { * color :  blue ;  /* or #color: blue */  } 
61.  
62. /* Everything but IE6 */  
63. #diecis iete { color /**/ :  blue  } 
64.  
65. /* IE6, IE7, IE8 */  
66. #diecin ueve {  color :  blue / 9 ; } 
67.  
68. /* IE7, IE8 */  
69. #veinte  { color /*/**/ :  blue / 9 ; } 
70.  
71. /* IE6, IE7 -- acts as an !important */  
72. #veinte siete {  color :  blue  !ie; }  /* string after ! can be anything */