要實現下圖中的樣式,在火狐等瀏覽器下是很好實現的
但在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;
- }