美文网首页Web前端之路让前端飞前端开发那些事
那些年我踩过的坑(前端开发疑难杂症列表附带解决方案)

那些年我踩过的坑(前端开发疑难杂症列表附带解决方案)

作者: 一笑解qian愁 | 来源:发表于2017-07-11 11:04 被阅读732次

不知不觉入坑已经两年了,一下是我平时工作中遇到的坑的积累笔记。在此分享出来,希望对新入行的同学有所帮助,以后遇到bug会持续更新。


1.苹果手机上,用span模拟按钮,加上的click事件没有触发。
  • 原因:除了 button 元素,其他元素的样式要加上 cursor: pointer,才能触发 iOS 的 click 事件
  • 解决方法:
  1. 设置样式:cursor: pointer
  2. 标签改成input\ button\ a
  3. 事件改成touchstart
2.wap上剪切板复制的区域不是理想的区域,

原因:未知
解决:事件委派父级选择document

3.弹窗和遮罩层层级显示不正确

原因:定位不同fixed,absolute
解决方法:统一定位方式

4.动态加载进来的元素设置字体大小和非动态加载进来的相同元素显示字体大小不一样,并且font-size设置的是一样的
  • 原因:不详
  • 解决方法:问题元素的父元素设置固定宽度
5.ios下时间格式问题
time = new Date('2016-08-09 00:00:00').getTime() //拿到的值是NaN
new Date('2016-08-09').getTime() //正常

解决方法:通过php转换成时间戳,或者将'-'改成'/'

  • 原因:ios下不支持'-'格式的时间可以支持'/'
  • 解决方案:改成'yy/mm/dd'
6.元素css3动画背景显示异常

做一个请柬的功能,里面有大量的css3动画,然后在真机上测试,总会有几个动画显示异常,如动画结束后元素背景突然消失、圆边角突然消失。。。等无法解释的现象。(其中使用了-webkit-mask-image属性)

  1. 播放完后背景变白(ios百度浏览器,微信浏览器)解决方法:精简动画
  2. 翻页错位(已解决,页面内的元素横向超出屏幕时左右滑动出现bug,设置body overflow;hidde解决)
  3. 播放完图片mask消失(android:UC浏览器)
7.滚动fixed定位的导航栏,背景设置为白色,当触发fixed定位的时候,在ios下safari显示背景色透明。
  • 原因:未知。
  • 解决方案:ios下改为touchend再出发fixed定位判断,安卓依旧scroll事件
8.ie8遍历数组出现意想不到的结果。
  • 原因:遍历data时在方法中同时对data进行了删一个,加一个属性,ie8一下会对修改的属性进行遍历所以遍历次数多一次,而其他浏览器只是遍历each前的属性数量。
  • 解决方案:深度复制data为data2,each data2而修改data
9.audio ios下不能自动播放
  • 原因:由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio.(ios保护策略)
  • 解决方案:js事件触发,模拟触发,要模拟用户事件才会触发
10.ie8-登录验证码发送失败的问题
  • 原因:低版本ie中数组不能使用indexOf方法
  • 解决方案:将数组变成字符串在用indexOf方法
11.ie9 ajax不发送,显示拒绝访问
  • 原因:低版本ie中认为bj.XXX.com.cnwww.XXX.com.cn是跨域,故获取不到数据
  • 解决方案:网站地址代理(jsonp)
12.原生js设置样式失败
 node.style = 'XXX=XXX;XXX=XXX';
  • 原因:兼容性问题,手机上不生效,pc端生效
  • 解决方案:需要单个属性单个写
13.mac电脑上,输入框内容不垂直居中。

网上说去掉高度,使用padding,然后并没有效果,最后发现是line-height的原因

  • 原因:不详
  • 解决方案:line-height不可设置成px,直接设置成line-height:1.5即可
14.select2搜索框配合bootstrap模态框使用时无法聚焦的bug
  • 原因:是因为模态框带有强制聚焦的函数
  • 解决方案:去掉强制聚焦的函数

$.fn.modal.Constructor.prototype.enforceFocus = function () { }

15.webUploaders 解决图片不能重复上传的问题

http://blog.csdn.net/qq_20910089/article/details/50378041
添加参数:
duplicate :true

相关文章

  • 那些年我踩过的坑(前端开发疑难杂症列表附带解决方案)

    不知不觉入坑已经两年了,一下是我平时工作中遇到的坑的积累笔记。在此分享出来,希望对新入行的同学有所帮助,以后遇到b...

  • 那些年,我踩过的那些坑

    前几日,阴差阳错去了西安一趟,见到了高中同学艳儿和丽,许久不见,相谈甚欢。高中的友谊就是这样的,即便经年不见,再见...

  • 那些年我踩过的坑

    1.关于股票 2015年的时候遇上了股市大涨,此时的老妈像打了鸡血一样,因为她的股票终于抬起了头! 兴奋的叫我开了...

  • 那些年我踩过的坑

    一、应届生面临的最大的就业坑—保险公司 大四上半年遇到疫情,学校匆匆结束课程。回家后,离过年还早,俺爹嫌弃...

  • 那些年,英国留学的学长学姐替你踩过的坑

    那些年,你的前辈们踩过的坑,千万记得要避过去啊! 前人栽树,后人乘凉。想必一谈起英国留学时踩过的那些坑,很多人都能...

  • 那些年踩过的坑

    1.iphone手机,input元素readonly仍获取了焦点. 解决办法:直接在dom节点添加内联事件onfo...

  • 那些年踩过的坑

    RecyclerView的IndexOutOfBoundsException异常 大半年没有敲代码了,顺手写个上拉...

  • 那些年踩过的坑

    2016-07-27 使用nginx中转时,如后端服务时间过长,导致前段页面返回http的504 gateway ...

  • 那些年踩过的坑

    每个人都是长跑者,注定是孤独的,我们需要越跑越和谐,越跑越懂得和自己相融和解。 每一个试图与灵魂做朋友的人,都必需...

  • 那些年踩过的坑

    近日,看到了“教育孩子你犯过这52个错误吗?”这篇文章,深有感触,感觉自己曾经犯过其中的19个错误。这19个错误,...

网友评论

    本文标题:那些年我踩过的坑(前端开发疑难杂症列表附带解决方案)

    本文链接:https://www.haomeiwen.com/subject/uaiphxtx.html