解決CSS margin-top在火狐下失效問題

作者：yimeng3025 2010-09-08 09:28:33

這里向大家描述一下CSS margin-top在火狐下失效的解決方法，margin-top屬性在火狐及IE下面的表現(xiàn)有的時候是不一樣的，在火狐下面可以實現(xiàn)自己定義的效果但是到了IE下面卻成了雙倍的像素。

margin-top屬性在火狐及IE下面的表現(xiàn)有的時候是不一樣的，這里和大家分享一下CSS margin-top在火狐下失效的方法，在火狐下margin-top很多時候都會失效，解決這個問題的辦法就是在CSS里面加入：float:left;display:inline;請看下文詳細(xì)介紹。

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

margin-top屬性在火狐及IE下面的表現(xiàn)有的時候是不一樣的，在火狐下面可以實現(xiàn)自己定義的效果但是到了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>無標(biāo)題文檔</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>無標(biāo)題文檔</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

【編輯推薦】

Chroma屬性實現(xiàn)CSS濾鏡透明效果
CSS Sprites圖片切割術(shù)與圖片優(yōu)化
CSS中DIV彈出層問題解決方案
CSS規(guī)范化命名通用命名規(guī)則
CSS分欄布局的兩種方法：絕對定位和浮動

責(zé)任編輯：佚名來源： hi.baidu.com

CSS margin-top