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
plaincopy

<div id="regLayer">  

   <div>用div包裹起来解决ie双倍问题  

    <div>  

        <label>username</label>  

        <input id="regLoginName">  

        <span id="verifyRegLoginName">*</span>  

    </div>  

   </div>  

   <div class="clearFloat">下面的div要清掉上面的浮动  

        <div>  

            <label>password</label>  

        <input type="password" id="regPassword">  

        <span id="verifyRegPassword">*</span>  

    </div>  

    </div>  

    <div class="clearFloat">  

        <div>  

            <label>repassword</label>  

            <input id="regCPassword" type="password">  

            <span id="verifyRegCPassword">*</span>  

        </div>  

    </div>  

</div>  

css代码如下：

[css] view
plaincopy

#regLayer div{外层div  

    margin:10px 0 0 5px;标准浏览器  

    margin: 0px\9;ie浏览器  

}  

#regLayer div div{内层div  

    margin:10px 0 0 5px\9;ie浏览器  

    height: 24px;  

    padding: 0px;  

    display: inline;为ie设置inline  

}  

  

#regLayer div div label{  

    text-align: right;  

    color: #5b8c05;  

    width: 200px;  

    line-height: 20px\9;ie下需要设置行高居中  

}  

  

#regLayer div  div label,#routeQuery div  div input{  

    margin: 2px 10px 0 10px;  

    float: left;  

}  

  

#regLayer div  div input{  

    width: 200px;  

    height: 20px;  

}  

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

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

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