解决CSS margin-top在火狐下失效问题-51CTO.COM

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

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

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

例子：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=gb2312"/> 
<title>无标题文档</title> 
<styletypestyletype="text/CSS"> 
<!--  
.w{  
background-color:#000099;  
padding:0px;  
height:100px;  
width:200px;  
margin-top:20px;  
margin-left:30px;  
}  
--> 
</style> 
</head> 
<body> 
<divstyledivstyle="background-color:#006666;
width:400px;height:200px;clear:both;"> 
<divclassdivclass="w"></div> 
</div> 
</body> 
</html>

解决后：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=gb2312"/> 
<title>无标题文档</title> 
<styletypestyletype="text/CSS"> 
<!--  
.w{  
background-color:#000099;  
padding:0px;  
height:100px;  
width:200px;  
margin-top:20px;  
margin-left:30px;  
float:left;display:inline;  
}  
--> 
</style> 
</head> 
<body> 
<divstyledivstyle="background-color:#006666;
width:400px;height:200px;clear:both;"> 
<divclassdivclass="w"></div> 
</div> 
</body> 
</html>

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

【编辑推荐】