web前端开发常见的兼容性问题总结

01. 块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大

在float的标签样式控制中加入 display:inline;将其转化为行内属性
我们最常用的就是div+css布局了，而div就是一个典型的块属性标签
横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，
这就是一个必然会碰到的兼容性问题。

02. 图片默认有间距

几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

因为img标签是行内属性标签，所以只要不超出容器宽度
img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距
去掉这个间距使用float是正道。

03. 标签最低高度min-height浏览器兼容

如果我们要设置一个标签的最小高度200px，需要进行的设置为：
div{
  min-height:200px; 
  height:auto !important; 
  height:200px; 
  overflow:visible;
}

04. height低像素值无效

height高度实际表现为大于5像素
问题产生是因为ie6下容器默认行高的影响；为高度过低元素添加溢出部分隐藏属性即可
div{
  height:5px;
  overflow:hidden;
}

05. 一些情况下对非可点击元素如(label,span)监听click事件

ios下不会触发，css增加cursor:pointer就搞定了。

06. h5底部输入框被键盘遮挡问题

h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决

var oHeight = $(document).height(); //浏览器当前的高度
   $(window).resize(function(){
        if($(document).height() < oHeight){   
        $("#footer").css("position","static");
    }else{
        $("#footer").css("position","absolute");
    }   
   });