"开发路上踩过的坑要一个个填起来————持续更新······(7月30日)"

时间:2022-12-30 13:52:26

欢迎转载,请注明出处!

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;即可,这里要注意不同浏览器兼容性。
设置后,菜单直接出现,没有滑动效果。