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

欢迎转载，请注明出处！

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

转载于:https://www.cnblogs.com/Gii16/p/5721010.html

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

【历史上的今天】3 月 30 日：世界上最早的表情符号；IBM z/OS 问世；微软发布 HoloLens 开发版
整理 | 王启隆透过「历史上的今天」,从过去看未来,从现在亦可以改变未来. 今天是 2022 年 3 月 30 日,在 1951 年的今天,UNIVAC 通过验收测试.UNIVAC(UNIVersa ...
初次尝试ESP8266带CH340串口开发板踩过的坑
文章目录前言踩坑记录 1.CH340驱动安装失败原因竟在microUSB数据线 2.microPython固件刷写闹笑话 3.Python版本与windows开发环境的秘密 4.毫无用处的配置工具 ...
vivado 如何创建工程模式_基于Vivado的FPGA高性能开发研修班2019年8月30日上海举行...
一.课程介绍: 从7系列FPGA开始,Xilinx提出了Vivado Design Suite设计软件,提供全新构建的SoC 增强型.以 IP 和系统为中心的下一代开发环境,以解决系统级集成和实现的生 ...
小程序坑集【日常总结，持续更新(11.08更新)】
大家好,上班的日子总是过的那么快,夹杂着一个多请了四天假的国庆节,转眼距离上篇博文又过去一个多月了,惭愧啊.之前萍子写过一篇[小程序跳H5页面]的博文,说来也是无心在结尾的时候,回想那些被小程序折磨的 ...
最新前端开发面试笔试题及答案---图片（面试题系列持续更新中）（4）
推荐文章: VUE之VUEX常见面试题大全汇总--史上最全[vuex面试题] 前端面试题之HTML+CSS(持续更新)_勤动手多动脑少说多做厚积薄发-CSDN博客1.行内元素和块级元素?img算什么? ...
最新前端开发面试笔试题及答案---图片（面试题系列持续更新中）（8）
推荐文章: VUE之VUEX常见面试题大全汇总--史上最全[vuex面试题] 前端面试题之HTML+CSS(持续更新)_勤动手多动脑少说多做厚积薄发-CSDN博客1.行内元素和块级元素?img算什么? ...
最新前端开发面试笔试题及答案---图片（面试题系列持续更新中）（3）
推荐文章: VUE之VUEX常见面试题大全汇总--史上最全[vuex面试题] 前端面试题之HTML+CSS(持续更新)_勤动手多动脑少说多做厚积薄发-CSDN博客1.行内元素和块级元素?img算什么? ...
最新前端开发面试笔试题及答案---图片（面试题系列持续更新中）（1）
推荐文章: VUE之VUEX常见面试题大全汇总--史上最全[vuex面试题] 前端面试题之HTML+CSS(持续更新)_勤动手多动脑少说多做厚积薄发-CSDN博客1.行内元素和块级元素?img算什么? ...
BLE低功耗蓝牙开发学习，从零到深教程文档总结(持续更新2022/6/14更新)
写在前面: 写教程原因: 说说自己写这次的ble教程的由来吧.以往公司总有很多是做单片机的或者应届生毕业,他们对ble不是很连接,公司一般都会安排别人来做一点培训啊,或者老员工带.巧了,之前帮别的培训 ...

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

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

最新文章

热门文章