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");
    }   
   });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,844评论 1 92
  • 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一...
    阳光嘚猴子阅读 434评论 0 5
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 2,505评论 0 20
  • 主要记录在菜鸟上学习的内容:平时可能会用到但是不太熟悉的内容——做记录之用。 隐藏和显示效果 可选的 speed ...
    哒哒DaDa阅读 582评论 0 1
  • 我们是否经常听到自己的爱人或伴侣说:“你有没有在听我说啊?”也许此时,我们是边看手机边听,或者听的不认真.....
    洁思漫讲阅读 249评论 0 1