那些年在前端踩的坑

1. 安卓和ios时间处理
   ios不承认“2016-07-06 00:00:00”这种时间格式，但是承认“2016/07/06 00:00:00”这样的。安卓是可以。所以在使用这个时间格式的时候要小心，使用之前需要转化一下时间格式。
2. 在ios中input的输入居中。
   碰到这个问题的情况如下

<p><label for="name"></label><input id="name"></p>

给p标签设置了高度之后，输入框的高度会是p标签的高度，而字体较小的时候，输入结束后，在input中的文字并不会上下居中。尝试着设置line-height来解决问题，虽然文字上下居中了，但是光标很大。最后的解决办法是，不给p标签设置height，而是使用padding来实现p标签应有的高度，这样就解决了问题。
3. android的标签的样式是系统自带的，不能修改。
如果要使用标签，而又要求可以美化，可以使用其他标签代替。如果选项很多，可以给选项的容器设置height和overflow-y:hidden。
4. sublime编辑代码之后，git diff 发现编辑过的代码后面都有^M，
于是在找了方法，在projects下面执行
git config –global core.whitespace cr-at-eol
之后再也看不到^M了
5. 为了提高用户体验，UI一般会要求元素的border非常的细。但是由于屏幕分辨率的关系，就算是1px的css像素设置，设备显示的时候也不一定用的是1px的设备像素。这时候border可以使用背景图来实现，但是只能是一个方向上的~其实这个方法很无奈，它使用的背景图是从2px压缩成1px的。如果你想加一个bottom border，那么你可以这样做：将背景图的上面一个像素弄成透明的，下面的一个像素弄成设计图的颜色。这样就可以在dpr较大的设备上显示比较细的线（只是视觉上的，但是我们只是需要视觉上的）栗子如下：

    <style>    .thin-border,.normal-border{width: 100%;height: 10px;margin-top:100px;}.thin-border:after {display: inline-block; content:"*";width: 100%; height: 1px;color:transparent; background: url(data:image/gif;base64,R0lGODlhAQACAIABAAAAAP///yH5BAEAAAEALAAAAAABAAIAAAICDAoAOw==) repeat-x 0 100%; background-size: 100% 1px;}.normal-border{border-bottom: 1px solid #000;}    </style>

   <div class="thin-border"></div>   <div class="normal-border"></div>

6.css :empty
使用:empty的时候需要注意，使用对象标签必须是空标签，:empty中的属性才会生效。空标签的含义是：没有任何字符，包括空格和回车。
7. css animation
使用animation定义了一个向左循环无间隙滚动的动画，在某三星手机和联想手机上，无动画效果。刚开始怀疑自己的样式写得有问题，改动了一系列的样式，结果都没有效果。后来发现是在js文件中，我有计算动画的执行时间，而我使用的是：

`$container.css('-webkit-animation-duration', animationDuration); $container.css('animation-duration', animationDuration);`

事实证明这两句话并没有起到作用，导致了动画没有执行。后来改用了原生的js：

 $container[0].style.animationDuration = animationDuration; $container[0].style.webkitAnimationDuration = animationDuration;

解决了问题。
这个问题真的是弄得我心力交瘁，还是请大神一起排查的，结果发现是zepto的bug，我还能说啥。

8.页面上的点击事件需要添加音效。
之前很简单的想法就是在页面中添加audio标签，并使用它的preload属性。
这样的确实现了功能，但是在第一次点击的时候还是有延迟或者是根本就不播放音效。修改tap，click事件没有解决问题，使用script标签进行预加载也没有用~
最后的解决办法是，点击的时候添加audio标签，并播放，如下：

luckyAudio = new Audio();luckyAudio.src = '预加载的音效路径';luckyAudio.play();