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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值