ie下雙倍margin的處理方法

要實現下圖中的樣式，在火狐等瀏覽器下是很好實現的

但在ie中有雙倍margin的問題，處理方法如下

1、在需要margin的div外層包圍一層div

2、內層div爲ie設置margin，div的display屬性inline

3、在外層div爲火狐設置margin

4、在外層div清掉上一個外層div的浮動

需要使用hack技術爲瀏覽器單獨賦值

html代碼如下：

<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代碼如下：

#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;”即可解決。