ie下双倍margin的处理方法
2011-09-11 15:00
281 查看
要实现下图中的样式,在火狐等浏览器下是很好实现的
但在ie中有双倍margin的问题,处理方法如下
1、在需要margin的div外层包围一层div
2、内层div为ie设置margin,div的display属性inline
3、在外层div为火狐设置margin
4、在外层div清掉上一个外层div的浮动
需要使用hack技术为浏览器单独赋值
html代码如下:
css代码如下:
(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代码如下:
<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;”即可解决。
相关文章推荐
- ie下双倍margin的处理方法
- IE6下margin双倍边距Bug的处理办法
- IE中float元素如果同时设置了margin值,此时margin的值会变为双倍的解决方法
- IE下margin:0 auto不居中解决方法
- Flexigrid在IE下不显示数据的有效处理方法
- JS 常用函数 -----------------慢慢添加(统一ie与ff不同处理方法)
- IE下margin:0 auto不居中解决方法
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- 火狐FF和IE兼容下margin-top无效的解决方法
- IE中浮动元素双倍外边距margin
- IE下margin:0 auto不居中解决方法
- 关于IE处理margin和padding值超出父元素高度的问题
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- ie下jquery.getJSON的缓存问题的处理方法
- 电脑故障处理小经验—IE无法打开链接的处理方法
- 关于IE处理margin和padding值超出父元素高度的问题
- IE中的开发人员工具的不显示的处理方法!
- ie中有双倍margin的问题
- IE 打开异常处理方法
- 解决在有base href 时location ie/ff处理不同问题方法