解決CSS margin-top在火狐下失效問題
作者：yimeng3025
這里向大家描述一下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;請看下文詳細介紹。
解決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>無標題文檔</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
【編輯推薦】
責任編輯：佚名
來源：
hi.baidu.com
