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.         #veintiseis { 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*=""] #catorce { color: red  } 
41.  
42. /* Everything but IE6-8 */ 
43. :root *> #quince { color: red  } 
44.  
45. /* IE7 */ 
46. *+html #dieciocho {  color: red } 
47.  
48. /* Firefox only. 1+ */ 
49. #veinticuatro,  x:-moz-any-link  { color: red } 
50.  
51. /* Firefox 3.0+ */ 
52. #veinticinco,  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. #diecisiete { color/**/: blue } 
64.  
65. /* IE6, IE7, IE8 */ 
66. #diecinueve { color: blue/9; } 
67.  
68. /* IE7, IE8 */ 
69. #veinte { color/*/**/: blue/9; } 
70.  
71. /* IE6, IE7 -- acts as an !important */ 
72. #veintesiete { color: blue !ie; } /* string after ! can be anything */