那些在移动端web踩过的坑（不定期更新）

那些在移动端web踩过的坑（不定期更新）

2017.03.24

css:

      Input,a标签被点击时有背景颜色

            解决方案： 添加-webkit-tap-highlight-color:rgba(0,0,0,0); 样式

      ios上input标签被设置边框后出现类似内阴影的效果以及圆角效果

            解决方案： 添加-webkit-appearance:none; border-radius:0;样式

      input标签的type="number"属性在遇上第三方输入法时，获取到焦点时第一次弹出为数字键盘，但可切换为其他键盘，亦可输入。

            解决方案：尽可能避免使用，尽可能采用js方式处理

JS：

    click事件300MS延迟

    解决方案：

                一：使用touch事件处理

                二：使用fastClick插件

   
    当有弹出层时使用touch事件会引发触摸穿透的问题，即在弹出层上触摸或者滑动时会等同于触摸弹出层底下的页面：

          解决方案；

               一：禁用默认事件，又需要则模拟相关事件

               二：使用move等事件作为替代（具体兼容方式见fastClick插件内部实现，网上也很多源码解析的）

 

2017.03.27

css:

　　ios8.1父元素设置了display:flex属性后，如果子元素为行内元素，为子元素设置宽高无效

　　　　解决方案：改变子元素为行内块( display:inline-block )或块级元素( display:block )

　　ios8.1设置input的placeholder样式无效

　　　　解决方案：利用父元素继承来对placeholder进行设置样式，如果输入框内的样式与placeholder的样式需要设置的不一致，那么可以采用after来实现伪placeholder，在用JS进行控制。

posted on 2017-03-24 14:09  bug_zero 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/kevily/p/6611241.html