ie中有双倍margin的问题

要实现下图中的样式，在火狐等浏览器下是很好实现的

但在ie中有双倍margin的问题，处理方法如下

1、在需要margin的div外层包围一层div

2、内层div为ie设置margin，div的display属性inline

3、在外层div为火狐设置margin

4、在外层div清掉上一个外层div的浮动

需要使用hack技术为浏览器单独赋值

html代码如下：

[html]  view plain copy

1. <div id="regLayer">  
2.    <div>用div包裹起来解决ie双倍问题  
3.     <div>  
4.         <label>username</label>  
5.         <input id="regLoginName">  
6.         <span id="verifyRegLoginName">*</span>  
7.     </div>  
8.    </div>  
9.    <div class="clearFloat">下面的div要清掉上面的浮动  
10.         <div>  
11.             <label>password</label>  
12.         <input type="password" id="regPassword">  
13.         <span id="verifyRegPassword">*</span>  
14.     </div>  
15.     </div>  
16.     <div class="clearFloat">  
17.         <div>  
18.             <label>repassword</label>  
19.             <input id="regCPassword" type="password">  
20.             <span id="verifyRegCPassword">*</span>  
21.         </div>  
22.     </div>  
23. </div>  

css代码如下：

[css]  view plain copy

1. #regLayer div{外层div  
2.     margin:10px 0 0 5px;标准浏览器  
3.     margin: 0px\9;ie浏览器  
4. }  
5. #regLayer div div{内层div  
6.     margin:10px 0 0 5px\9;ie浏览器  
7.     height: 24px;  
8.     padding: 0px;  
9.     display: inline;为ie设置inline  
10. }  
11.   
12. #regLayer div div label{  
13.     text-align: right;  
14.     color: #5b8c05;  
15.     width: 200px;  
16.     line-height: 20px\9;ie下需要设置行高居中  
17. }  
18.   
19. #regLayer div  div label,#routeQuery div  div input{  
20.     margin: 2px 10px 0 10px;  
21.     float: left;  
22. }  
23.   
24. #regLayer div  div input{  
25.     width: 200px;  
26.     height: 20px;  
27. }  

(1)、div加上display:inline;即可解决你的烦恼。

(2)把margin改成padding，也可以达到同样的效果。

(3)但在margin_top和margin_bottom设置的情况下，在IE8和其他某些浏览器上会出现双倍距离。这个问题是要你在父容器中添加“overflow:hidden;”即可解决。