点击这里给我发消息

解决CSS margin-top在火狐下失效问题

这里向大家描述一下CSS margin-top在火狐下失效的解决方法，margin-top属性在火狐及IE下面的表现有的时候是不一样的，在火狐下面可以实现自己定义的效果但是到了IE下面却成了双倍的像素。

AD：

 

margin-top属性在火狐及IE下面的表现有的时候是不一样的，这里和大家分享一下CSSmargin-top在火狐下失效的方法，在火狐下margin-top很多时候都会失效，解决这个问题的办法就是在CSS里面加入：float:left;display:inline;请看下文详细介绍。

解决CSS margin-top在火狐下失效的方法

margin-top属性在火狐及IE下面的表现有的时候是不一样的，在火狐下面可以实现自己定义的效果但是到了IE下面却成了双倍的像素，在火狐下margin-top很多时候都会失效，解决这个问题的办法就是在CSS里面加入：float:left;display:inline;

例子：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"
  6. content="text/html;charset=gb2312"/> 
  7. <title>无标题文档</title> 
  8. <styletypestyletype="text/CSS"> 
  9. <!--  
  10. .w{  
  11. background-color:#000099;  
  12. padding:0px;  
  13. height:100px;  
  14. width:200px;  
  15. margin-top:20px;  
  16. margin-left:30px;  
  17. }  
  18. --> 
  19. </style> 
  20. </head> 
  21. <body> 
  22. <divstyledivstyle="background-color:#006666;
  23. width:400px;height:200px;clear:both;"> 
  24. <divclassdivclass="w"></div> 
  25. </div> 
  26. </body> 
  27. </html> 
  28.  

解决后：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5.  
  6. <metahttp-equivmetahttp-equiv="Content-Type"
  7. content="text/html;charset=gb2312"/> 
  8. <title>无标题文档</title> 
  9. <styletypestyletype="text/CSS"> 
  10. <!--  
  11. .w{  
  12. background-color:#000099;  
  13. padding:0px;  
  14. height:100px;  
  15. width:200px;  
  16. margin-top:20px;  
  17. margin-left:30px;  
  18. float:left;display:inline;  
  19. }  
  20. --> 
  21. </style> 
  22. </head> 
  23. <body> 
  24. <divstyledivstyle="background-color:#006666;
  25. width:400px;height:200px;clear:both;"> 
  26. <divclassdivclass="w"></div> 
  27. </div> 
  28. </body> 
  29. </html> 
posted @ 2012-05-16 10:42  UpdateLU  阅读(1743)  评论(0)    收藏  举报