ie下双倍margin的处理方法
2013-11-26 12:00
295 查看
要实现下图中的样式,在火狐等浏览器下是很好实现的
但在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;”即可解决。
但在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;”即可解决。
相关文章推荐
- ie下双倍margin的处理方法
- IE6下margin双倍边距Bug的处理办法
- IE中float元素如果同时设置了margin值,此时margin的值会变为双倍的解决方法
- IE下margin:0 auto不居中解决方法
- IE6、IE7下绝对定位position:absolute和margin的冲突bug解决方法
- ie下jquery.getJSON的缓存问题的处理方法
- IE无法打开链接的处理方法
- js不能执行,IE处理方法
- jquery下ie的margin-left ----bug 以及parseInt方法bug
- ie下jquery.getJSON的缓存问题的处理方法
- IE下margin:0 auto不居中解决方法
- IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决方法
- 关于EasyUI对话框,表格和菜单组件在IE下的兼容性处理方法
- ie下jquery.getJSON的缓存问题的处理方法
- div样式在IE下margin:0 auto不居中多种解决方法
- 关于EasyUI对话框,表格和菜单组件在IE下的兼容性处理方法
- IE下margin:0 auto不居中解决方法
- 关于IE处理margin和padding值超出父元素高度的问题
- IE6下margin双倍边距Bug处理办法
- 处理IE不支持document.getElementsByName获取Div对象的方法