Home思洋影视事业部网站建设知识库
0 Comments

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

发布于：2013-11-04  |   作者：广州网站建设  |   已聚集：人围观

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




	解决后：




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




	原文出处：http://hi.baidu.com/yimeng3025/modify/blog/5267ce3095970211eac4af16

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机