ie下双倍margin的处理方法

最新推荐文章于 2017-04-01 09:34:01 发布

del1214

最新推荐文章于 2017-04-01 09:34:01 发布

阅读量9.6k

点赞数

分类专栏： CSS 文章标签： ie div 浏览器 input class html

本文链接：https://blog.csdn.net/del1214/article/details/6767430

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

要实现下图中的样式，在火狐等浏览器下是很好实现的

但在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;”即可解决。