web前端开发中浏览器兼容问题（二）

6.DIV浮动IE文本产生3px的问题

• 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.    

#box  {   float:left; width:800px;  }   

#left   {   float:left; width:50%;  }   

#right {   width:50%;  }

*html  #left{   margin-right:-3px;   //这句是关键  }    

 

<div id="box">

    <div id="left"></div>

<div id="right"></div>

</div>

显示区别

  

 

  

7.高度不适应问题

• 高度不适应是当内层对象的高度发生变化时，外层高度不能自动进行调节，特别是当内层对象使用了margin或padding时。

例：    

    

  

    

 

• 解决办法：在P对象前后各加一个div对象，对这个div对象添加一个border属性即可。

8.IE图片下有空隙产生问题

• 解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

9.对齐文本与文本输入框问题

加上 vertical-align:middle;

<style type="text/css">  

      input {      

width:200px;      

height:30px;      

border:1px solid red;      

vertical-align:middle;

     }

</style>

10.web标准中id与class有区别吗

• WEB标准中是不容许重复ID的,比如 div id="abc"   不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用 

• 属性的优先级:  ID 的优先级要高于class

• 方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

 

 

来源：oschina

链接：https://my.oschina.net/u/2971691/blog/795277