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

不知不觉入坑已经两年了，一下是我平时工作中遇到的坑的积累笔记。在此分享出来，希望对新入行的同学有所帮助，以后遇到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.cn和www.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