ie下双倍margin的处理方法
http://www.flypeng.com win10系统 发布时间:2015-08-29 12:02 来源:鹏鹏电脑知识网 浏览:加载中

但在ie中有双倍margin的问题,处理方法如下

1、在需要margin的p外层包围一层p

2、内层p为ie设置margin,p的display属性inline

3、在外层p为火狐设置margin

4、在外层p清掉上一个外层p的浮动

需要使用hack技术为浏览器单独赋值

html代码如下:

 

 

 

[html] view plaincopy

 

 

  1. <p id="regLayer">  
  2.    <p>用p包裹起来解决ie双倍问题  
  3.     <p>  
  4.         <label>username</label>  
  5.         <input id="regLoginName">  
  6.         <span id="verifyRegLoginName">*</span>  
  7.     </p>  
  8.    </p>  
  9.    <p class="clearFloat">下面的p要清掉上面的浮动  
  10.         <p>  
  11.             <label>password</label>  
  12.         <input type="password" id="regPassword">  
  13.         <span id="verifyRegPassword">*</span>  
  14.     </p>  
  15.     </p>  
  16.     <p class="clearFloat">  
  17.         <p>  
  18.             <label>repassword</label>  
  19.             <input id="regCPassword" type="password">  
  20.             <span id="verifyRegCPassword">*</span>  
  21.         </p>  
  22.     </p>  
  23. </p>  

 


css代码如下:

 

 

 

 

[css] view plaincopy

 

 

  1. #regLayer p{外层p  
  2.     margin:10px 0 0 5px;标准浏览器  
  3.     margin0px\9;ie浏览器  
  4. }  
  5. #regLayer p p{内层p  
  6.     margin:10px 0 0 5px\9;ie浏览器  
  7.     height24px;  
  8.     padding0px;  
  9.     displayinline;为ie设置inline  
  10. }  
  11.   
  12. #regLayer p p label{  
  13.     text-alignright;  
  14.     color#5b8c05;  
  15.     width200px;  
  16.     line-height20px\9;ie下需要设置行高居中  
  17. }  
  18.   
  19. #regLayer p  p label,#routeQuery p  p input{  
  20.     margin2px 10px 0 10px;  
  21.     floatleft;  
  22. }  
  23.   
  24. #regLayer p  p input{  
  25.     width200px;  
  26.     height20px;  
  27. }  

 


 

 

 

(1)、p加上display:inline;即可解决你的烦恼。

(2)把margin改成padding,也可以达到同样的效果。

(3)但在margin_top和margin_bottom设置的情况下,在IE8和其他某些浏览器上会出现双倍距离。这个问题是要你在父容器中添加“overflow:hidden;”即可解决。

如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息!