欢迎转载，请注明出处！

https://gii16.github.io/learnmore/2016/07/29/problem.html

踩过的坑及解决方案记录在此篇博文中！

个人理解，如有偏颇，欢迎指出！

欢迎交流！

3.scss和css的区别

在使用github pages的jekylltheme时，发现有一个scss文件，略感好奇。查了一下，scss文件是css预处理器所产生的中间文件，可通过编译产生css文件。简单说起来就是，程序员觉得CSS只能一行一行的手动添加实在是太麻烦。于是大家约定好，使用一种语言写一个文件，通过该文件可以编译出具体的css文件，比如你在JAVA当中使用for循环执行了10词println，你只需要两行代码就搞定了，但最终运行的时候会输出10行内容。这多出来的八行就不需要你手动去写。

2.移动端CSS3中的contenteditable属性引起的图片删除问题（待解决）

CSS3中提供属性contenteditable，可将DIV变为可编辑的，为自行开发富文本编辑器提供便利。笔者之前在使用一款移动端开源编辑器artEditor（https://github.com/baixuexiyang/artEditor）时，遇到部分安卓机型图片无法删除的问题，即光标在图片后面时，点击删除键，不会删除图片，光标会直接跳到图片前面并删除图片前面的文字。笔者对该问题进行了测试，发现不仅是该编辑器的问题，即使直接使用contenteditable=ture的DIV，使用appendchild(img)方式插入图片，图片也无法删除。
初步预测该问题与不同机型的安卓浏览器内核有关，可能部分厂家对内核进行了二次开发，导致该兼容性问题。该问题尚未解决。

1.CSS3中的transition属性引起的滑动问题

设想你在使用Html+Js+Css进行开发，需要实现一个根据点击位置弹出菜单的功能，之前在移动端的开发中笔者遇到过这个需求，即在手指点击的位置弹出一个菜单。笔者的做法是对菜单DIV设置style="display:none"，通过class设置position为fixed，在点击后，获取鼠标位置，对菜单DIV设置style="top:(具体值);left:(具体值);"（当然也可以使用JQuery实现）。
但在具体操作时，发现弹出菜单并不是直接出现在鼠标点击的位置，而是先出现在它原来的位置，然后滑行到鼠标点击的位置，这个方式会暴露菜单前一次所在的位置，用户体验不好。
查阅相关资料后发现是CSS3中新属性transition的设置问题。该属性用于产生一个过渡效果，详情可见W3C：http://www.w3school.com.cn/cssref/pr_transition.asp。想要关闭过渡效果只需要设置transition：none;或者transition-property：none;即可，这里要注意不同浏览器兼容性。
设置后，菜单直接出现，没有滑动效果。

"开发路上踩过的坑要一个个填起来————持续更新······（7月30日）"的更多相关文章

1. Dcloud开发webApp踩过的坑

   Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...

2. 转：Flutter开发中踩过的坑

   记录一下入手Flutter后实际开发中踩过的一些坑,这些坑希望后来者踩的越少越好.本文章默认读者已经掌握Flutter初步开发基础. 坑1问题:在debug模式下,App启动第一个页面会很慢,甚至是黑 ...

3. vue项目开发中踩过的坑

   一.路由 这两天移动端的同事在研究vue,跟我说看着我的项目做的,子路由访问的时候是空白的,我第一反应是,不会模块没加载进来吧,还是....此处省略一千字... 废话不多说上代码 路由代码 { pat ...

4. 写一写关于python开发面试的常遇到的问题以及解答吧，持续更新——看心情

   1,什么是python中的魔术方法? 魔术方法是重载运算符的昵称,形式是__init__类似这样的前后双下滑线组成的,常用的__init__,__new__,__call__,__str__,__ge ...

5. vuejs 开发中踩到的坑

   用 v-for 循环式  每个item的值相等的情况下,会影响v-model的双向绑定: Modal 组件开发,主要用slot 标签来实现 <template> <transitio ...

6. 那些年，我们在Django web开发中踩过的坑（一）——神奇的‘/’与ajax+iframe上传

   一.上传图片并在前端展示 为了避免前端整体刷新,我们采用ajax+iframe(兼容所有浏览器)上传,这样用户上传之后就可以立即看到图片: 上传前: 上传后: 前端部分html: <form s ...

7. vue高频面试题（面试路上踩过的坑）

   ### Vue 双向绑定原理 mvvm 双向绑定,采用**数据劫持结合发布者-订阅者模式**的方式,通过 `Object.defineProperty()` 来劫持各个属性的 setter.gette ...

8. iphone 开发h5 踩过的坑

   html,body{ -webkit-text-size-adjust: none; }  // 当需要在中文版chrome浏览器中显示小于12px的字体时,而且此时页面放大效果会被阻止 html,b ...

9. asp.net开发中遇到的奇葩bug及解决办法（会持续更新。。。）

   1,不知道你们遇没遇到过,在vs2010或更高版本上运行程序的时候,完全没问题,放在IIS中出现了问题,就比如左侧是菜单项,点击菜单右边显示,如果菜单链接是这样:content.aspx,而另一个链接 ...

随机推荐

1. [工具]Mac平台开发几个网络抓包工具(sniffer)

   Cocoa Packet Analyzer http://www.tastycocoabytes.com/cpa/ Cocoa Packet Analyzer is a native Mac OS X ...

2. 教你50招提升ASP.NET性能（四）：精选的技巧

   (4)A selection of tips 招数4: 精选的技巧 Make sure HTTP compression is turned on for any uncompressed conte ...

3. 详解Android Handler的使用

   我们进行Android开发时,Handler可以说是使用非常频繁的一个概念,它的用处不言而喻.本文就详细介绍Handler的基本概念和用法. Handler的基本概念         Handler主 ...

4. SDWebImage 原理及使用

   这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征. SDWebImage 加载图片的流程 入口 setImageWi ...

5. 如何用visual studio控件（repeater）绑定数据库（SQL server）信息并显示

   今天学习了下如何间接绑定数据库网上看了很多信息,都云里雾里,没有图片说明,初学者完全看不懂,我自己做了一个DEMO,相信可以帮到大家! 一.建立数据库,并构建表信息,我的表信息如下: 表中的数据在数据 ...

6. BLE简介和Android BLE编程

   一．BLE和BT区别 其实我知道许多程序员不太喜欢阅读除了代码以外的文档,因为有时这些过于冗长的文档对编程并没有更多的好处,有了协议,接口,demo差不多很多人就能写出很好质量的代码了.但其实更深入的 ...

7. carthage和cocoapods

   http://www.jianshu.com/p/b5607b8b9348 http://www.jianshu.com/p/5ccde5f22a17 1.在brew install carthage ...

8. oracle-查询-时间条件查询

   select * from 表名 where date =to_date('时间','yyyy-dd-mm');

9. 摄像头录制视频并且保存成mp4

   import cv2import numpy as npimport os cap = cv2.VideoCapture(1)#v4l2-ctl --list-devices 查看设备号,非正常中断时 ...

10. linux 如何删除文件夹下面的文件和文件夹，只保留两个文件

    # 删除目录下那两个文件之外的所有文件 find dir/ -type f ! -name file1 -a ! -name file2 | xargs rm -f   # 删除所有空目录(非空目录不 ...