大段文字看起来眼睛好累,所以我随便按每10个进行一次分割。
如果你有更好的展现形式,欢迎投稿,非常感谢!
- HTML 中设置
[dragable]仅图片可触发拖拽,设为[dragable="true"]才是整个元素可拖拽,案例 - TDesign 的
t-pagination使用defaultPageSize搭配total并动态修改total不生效,需使用pageSize - Vue3 中
const formData = reactive({})传给子组件v-model="formData"有概率打包报错,所以仅能使用ref - 当存在
meta[http-equiv="Content-Security-Policy"]时[preload]属性会失效,可换用http header方式 - mac 的
node_modules/.bin中是软链接,所以拷贝node_modules给 windows 用会找不到指令 axios.get(`/api?n=${n}`)当n带有特殊符号#?时会有错误,故采用axios.get('/api', { params: { n } })更佳- 例如
decodeUriComponent('%st%C3%A5le%')还是会报错的,特别场景可使用decode-uri-component的包
- 直接访问资源然后刷新不会使用缓存,作为内链刷新才会使用缓存
- 图片拖拽不要缩略图一般用
draggable="false"或-webkit-user-drag: none;处理,但其他元素拖拽区域重叠会使其无效 - 若
dragstart中有preventDefault将不触发dragend和drop drop事件必须dragover中有preventDefault才可触发- 遇到
trim不掉的空格,可能是遇到了\u00A0需要replaceAll掉,补充 glob('aa/**/bb')不支持 windows,需改为glob('**/xx', { cwd: 'aa' })uni-app在 H5 平台v-for="item in 10"中item从1开始,其他平台从0开始,需改用index- 页面使用
onbeforeunload做跳转拦截后,但普通的跳页也会拦截,故而需特殊处理,案例 uni-app的class A exnteds B中的B在企微模式下不能为函数,比如Promise需嵌套成class MyPromiseuni-app中:key="a+b"这类表达式在小程序模式下不被支持
- 在开发时文件夹为
datePicker但import 'datepicker'能跑通,但部署时 Linux 中无法跑通 - 当
inline搭配font-size: 0时该元素宽高为 0,而inline-block还是会被子级撑起宽高,案例 - 部分苹果机小程序不支持
scale(-1, 1)负值,可用transform(-1, 0, 0, 1, 0, 0)替换 Taro.nextTick有概率不触发回调,而wx.nextTick不会,推荐根据环境采用后者- 小程序
canvasPutImageData的位置尺寸必须为整数,否则会报invalid data format - 小程序
Button数字是非衬线汉字是衬线,与View的表现不一致,可加lang='zh_CN'来处理 - 当父级高度小于其行高时,子级行块元素的
vertical-align: middle会造成父级上方有空隙,案例 - JSX 中在
map内进行判断渲染,未渲染的节点会有空key的报错,最好采用Fragment做空节点,案例 - React 的
style对象顺序不同可能造成渲染结果不同,案例 - 安卓机发朋友圈时,纯色图或小图会不出现在选择列表中
- 小程序重绘或
swiper滑动时,父级圆角会突然遮不住子级尖角,故子级最好也都加圆角 - Taro 3.3.6 用 style 设置
pointerEvents未渲染该属性,只能靠 css 文件设置了 - 小程序当 Canvas 尺寸较大 (比如 3000x3000) 时,部分机型会导出图片失败
- 小程序初始化较大尺寸的 Canvas 后,部分机型的交互会变得很卡顿
- Taro 不支持
<this.Item>这种复合标签的解析,可const Item = this.Item处理 - 对象赋值的顺序不同,会造成
stringify的结果不同 - React 的
<>{content}</>会删掉\r换行,在renderToString时不会删掉,需规避 react-color插件在 iframe 中click-outside交互会报错,在使用其他插件时也需注意此场景- 腾讯云图片资源压缩,若压缩后尺寸小于
1px会压缩失败,案例,文档 - 当子级高度大于父级固定高度时,父级弹性容器会考虑换行,案例
mouseout绑在父级,进出子级也会触发,有点难用translate(50px)相当于translate(50px, 0),而scale(1.5)相当于scale(1.5, 1.5),需区分antd-mobile的Slider组件,当值范围很大时,滑杆的点击极容易触发滑动,不甚推荐这样的交互- 在
mounted周期中依旧可能query不到元素,还是在ref周期中保险一些 - 正则
/^[23-69]$/实则是匹配23-69,所以.test('50')为false - cocos 的两个元素碰撞,触发
onCollisionEnter的先后顺序为节点顺序,拖谁撞谁需自行处理 - cocos 中,
zIndex会使其在cc.Layout布局中渲染排序改变 - 部分浏览器不支持
opacity为百分比值5%,最好转为小数0.5 - CocosCreator 英文版时没有腾讯云的服务项 (版本 2.4.3),需切为中文版
- jquery 中
html('<p><p>1</p></p>')会奇怪地得到<p></p><p>1</p><p></p>
- js 中
??属于低优先级,比如1 + undefined ?? 0会得到NaN,在 dart 中也是 bind修改后无法再次修改this,因此诞生了软绑定softBind,案例gap/grid-gap中 y 轴若为百分比,会以宽度为准,且不会撑起高度- 在省略样式处创建层叠上下文,会未被省略,但表现很奇特,案例
- 浏览器回退时接口会
from disk cache使用缓存造成动态数据未更新,应该是主要依据于Last-Modified - cocos 的
cc.Graphics代码写的fillColor不支持半透明,但 Creator 软件的设置Fill Color倒有效 - 父级
pointer-events: none但子级为auto,那子级范围内认可触发父级效果,案例 case若不加{}并未独立作用域,比如switch(1) { case 1: let a; break; case 2: let a; break; }会报错- SVG 中
polygon没有x等调位置,只能靠transform了 var x=0; var y=false; x=y?100:x++答案为 0,挺有趣的错误
transition-delay为0ms不会触发transitionend事件,哪怕有0.001ms就会。animation没这问题- 部分浏览器
transition: background-image 1s会有两图重叠渐显渐消的效果,但非常不稳定 flex: 1实则为flex: 1 1 0的缩写,应写为flex: auto或flex: 75%更好- flutter 的
Positioned如果没有定位属性,则会与Container表现一致 transition和animation的0必须有单位,如0sinline中定位然后right: 0是按最后一个字符来定的,而不是容器边界- CSS 的
content: attr(data-title)中 attr 加引号会失效 - 如下条,当想要无高度的 appBar 时 child 若用
SizedBox.shrink()表现不一致 - Flutter 中想要无高度的 appBar 可用
PreferredSize(preferredSize: Size.zero, child: Container()) - Flutter 中在无 appBar 的 body 中使用 Expanded 在顶部会有奇怪空白,案例(需翻墙)
- SVG 当
fill="none"时无法触发 SMIL 的begin="click",需用fill="transparent" let a = b = 1中的b其实是var的- 给定位定高的
body设置背景图,contain会失效,案例 - 给不定高
body设background-size表现比较意外,案例 - 当父级
overflow: auto,子级绝对定位超出,父级不加relative可看到子级,案例 - 阻止微信浏览器字体大小
setFontSizeCallback在微信上可行,在企业微信上不可行 - 组件内的
slot不算父级的slot,案例 - 子级非
flex-shrink:0且父级为flex时,子级尺寸不会超出父级,案例 '11Q'.match(/((\d)+)([A-Z])/)返回['11Q', '11', '1', 'Q'],注意括号解析顺序与范围- 模板字符串中
$${price}和\${price}结果不同,前者返回$0.00后者返回${price}
- 在部分版本浏览器中,某些元素如
<summary><fieldset><button>不可作为flex容器的工作 'abc'.includes('')包含空字符串为空时始终为 true,需进行规避- 同时解密
decodeURI(decodeURI("%5Cu9648"))不可行,需JSON.parse('"' + decodeURI('%5Cu9648') + '"') - 小程序自定义组件中,无法 canvasToTempFilePath 生成图片,报 fail canvas is empty
- 小程序自定义组件中的 canvas,在 createCanvasContext(canvasId, context) 时必须加 context
- 如果小程序 web-view 内网页跳转带有 hash 操作,部分安卓机用 replace/replaceState 会跳页两次
- 小程序设置 web-view 链接时需带上
#wechat_redirect,内部跳页时不需带,否则苹果不能访问 - jQuery 的 append 对同源 script 用的 appendChild,对不同源资源是 ajax 然后 eval,其实不知先后
innerHTML = '<script src="http://">'是不加载 script 的- 微信浏览器进入页面后
reload刷新本页,会造成其中的 svg 显示异常,svg 被缓存后会恢复正常,应避免此类操作
var x = [] \n (function(){})()数组下一行是括号,没写分号造成的报错- 正则
\w也会匹配到下划线_和数字 - vue 中当
props: { x: [Boolean, String] }时,x: ''为true,x: 'x'为'x' - vue 的
computed:{x(){}}不能直接v-modal="x" - 小程序
<web-view>的链接xx?a=1会访问 404 ,改为xx/?a=1才行 inline的margin-left和text-indent效果竟然是一样的36.62 * 100; // 3661.9999999999995故而(0.1 * 10 + 0.2 * 10) / 10的处理还需加上Math.round166.665.toFixed(2)没有按正确的四舍五入等于"166.67"- 空字符串
''.split()会得到[""]不比要的数组项,需进行规避 - 定位或
inline-flex的,且定高的容器设flex-flow: column wrap时,表现很奇怪,无法实现包裹效果
- 文本内有空格时,
text-indent: -999em莫名会有空白宽度(chrome64 版本有) - 好像没办法触原生
select的展开 - 子元素为
inline-block时父级底部会有一点空隙,与vertical-align + line-height有关,案例 - canvas 的
lineWidth即使设成0也还会是1 [NaN].indexOf(NaN); // -1数组中找不到NaN- weui 的
hideLoading方法会使 Toast 也消失 transform: scale(.5)下的offsetWidth等还是原宽,只能getBoundingClientRect().width- 其他浏览器下单页面项目的
/#/被认为是 hash,但 IE 浏览器会认为是路径,会造成无法访问 \1在正则中,有匹配还好,没有的话请注意'\1'.split('')与/\1/.test('\1')的不同eval([1,2] + '==' + 2); // true,感觉使用eval时还会有其他骚处理
<select>的readonly还是能点开,推荐使用select[readonly] { pointer-events: none; }let和const不会像var一样会在 window 下声明,比如let a是取不到window.a的wx.onMenuShareAppMessage的type不能是空字符串,要么不传,要么type: "link"wx.config需要传入的链接,苹果机下如果使用过 history api 将签名失败。- Safari 和 IE9- 浏览器中,
option设display:none无效,可包一层隐藏的span或重新拼 dom - CSS 的
content的文本和图片,是不可选择的 - 苹果机键盘弹起后元素上移,键盘收回后元素不归位,用
$(document).scrollTop(0, 0);解决(部分机型依旧不行) - 3.0 版本前的
$.param会把空格转为+号,可能后来发现链接中的 + 与空格的 + 冲突所以砍掉了 - IOS 下的 webgl 不清晰,可显示 2d 的 canvas 绘制隐藏的 webgl 的 getImageDate 能清晰
- 小程序不会正确处理图片链接中
\,造成图片请求但不显示,只能是/式的路径,比如 图片
- 部分安卓机
background-image与border-radius合用会不显示图片,需加上background-color才行 input[type="number"]不支持使用 selection 相关的光标操作- 用
data:image/svg+xml,拼出来的 SVG 背景图,background-size不支持拉伸 - ES6 用变量作对象属性名时有点小问题,如
var a = 'x'; var obj = { [a]: 1 }; obj[a]; // 1但obj.a不会 - 苹果机 Safari 下设
user-scalable=no的<meta>无效 btoa转 base64 不支持传入中文等 Unicode 字符,可搭配encodeURIComponent使用- 极少情况下
textarea书写时双标签间有回车会不显示placeholder,不详 - IOS 的
iframe不支持传高度,最好有个父级包着并设-webkit-overflow-scrolling滚动 [0, , 2, 3].indexOf()得-1,[0, undefined, 2, 3].indexOf()得1RegExp第二个参数,若传入's'部分苹果机报错,看 文档 确实说只能传'igm'
- 在 vue 的根节点进行
innerHTML += 'x'会造成 vue-router 失效,appendChild是 OK 的 input[type="checkbox"]加字符串checked="false"或setAttribute('checked', '')也会勾选- html 中
data-userId会显示为全小写data-userid,但attr('data-USERID')不区分大小写都能获取到 - UTF-16 字符在处理字符串时需注意,比如
'𠮷'.slice(-1)会得到未知字符,恐怕只能用for-of来做了 - 空数组进行
every判断始终为true,需根据场景做好排除 - 在 SCSS 中
@extend .x不仅会继承.x,与其相关无论写在何处的h1.x也会被继承 :last-child是按 dom 位置来的,并不受order排序的影响- 给伪元素的
content直接加text-indent:-999em无效,需改为其他display才行,即inline不可以 JSON.stringify(Infinity) === "null"(NaN 也是),JSON.stringify({a: undefined}) === "{}"(但 null 不会)
- 父级
overflow:auto; position:relative;,子级绝对定位并超出,结果会显示滚动条(chrome 64) - 父级无高度时,子级
position: relative的百分比定位top: 50%会无效,案例 - ueditor 插件初始化时会触发
hashchange事件,希望你在这里面没有写什么操作 display: flex和子级margin: auto;合用时,效果很奇妙,比如居中/两个子级的自动空隙等<script src="xx.js" />不能使用单标签格式,不然会把后面的都当做文本- 属性选择器
[id=value]中当 value 中有小数点时会报错,保险起见还是带双引号更好[id="value"] - 小程序覆盖在 input 上的元素,键盘弹起后,点击就无法触发了
- ElementUI 的
el-date-picker[type="daterange"]在 火狐 下不支持yyyy.MM.dd格式数据的传入,-/可以 - 有
mask的元素box-shadow非inset形态无效,filter:drop-shadow()也是如此(可放到父级去) min-width的默认是auto,而max-width的默认是none
- https 下无法点击打开下载 http 的资源
input[type="file"]的触发会触发window.onblur事件,可用document.activeElement来进行排除- 点击在
label[for]的父级上,会触发两次click,很迷 - IOS will only allow focus to be triggered on other elements
new RegExp需对特殊字符进行转义,比如new RegExp('\\d').test(1)才有效,还是/\d/.test(1)好呀。- 设置
border-image后,border-radius失效。 - 正则的括号会在
match时再单独提取出来一份,比如"ab".match(/(b)/)会得到["b","b"] - 苹果机上
div的click委托在document或body上会无效,可换为a或添加cursor: pointer等。见文 - 苹果机移动端
contenteditable无效,需加上-webkit-user-select: text
- 苹果机在纵向
flex: 1时非常尴尬,有时flex-basis: 100%可行,有时必须定高。 - 小程序的
cover-view不能使用:before和gradient样式 disabled会禁掉mouse事件,却没有禁touch事件$.fn.serializeArray方法会把回车\n改为\r\n,增加了字符串长度Math.round四舍五入方法可能有误,见 推文- 看 源码 发现,
Array.sort是要返回正负,而非布尔值 - 浏览器开始禁止音频视频的自动播放,暂时无解
- jquery 在 table 中 html 个 table 会无效,append 个 table 有时报错,源码。
location.origin在 IE11 以下不兼容
- 苹果机在 QQ 浏览器中修改
document.title无效,需新建删除一个iframe来骚操作 - 粘贴功能
execCommand('paste')被各家浏览器禁用掉了 - 小程序的
cover-view手机上不触发 touch 事件 - 小程序的
cover-image不能单独定位,如果父级cover-view定位了那倒可以了 - 写 HTML 时两个节点间有换行或空格,需要两次 nextSibling 才能找到下个节点,因为中间多个空白的 text 节点
- 小程序的 toast 和 loading 等其实解决不了点击太快的问题,还得靠变量来阻止才行
inline行级元素设置transform无效- 苹果机没有原生双击事件
dblclick :not(.x):last-of-type并不代表去掉.x后的最后一个,它们是并列关系而非先后关系table-layout: fixed表示不再自动分配宽度,傻逼的我还以为是固定thead达到类似position:fixed的效果
writing-mode:vertical-rl在 Safari 上异常(无解,等于苹果浏览器不能玩耍了)translate3d下的fixed失效,与absolute等效,反正能不用 fixed 绝不用touchend或tap会出现事件穿透,其实浏览器已经做了优化,click是可以满足我们的要求的- 元素未显示时的 swiper 的初始化是有误的,
mySwiper.update()有效 - 苹果机
new Date(d)时d不能采用 "xxxx-xx-xx" 格式 display:flex被display: none覆盖后再使用 jquery 的fadeIn()将显示display: block- 苹果机有滚动反弹,与
position: fixed一起玩耍时很可怕,特别是微信浏览器 clip:rect(1,2,3,4)必须要和absolute合用,且 2&3 必须有(作为宽高),更推荐使用clip-pathscaleX等的默认值是 0 不是 1,所以小心 css 动画时会有一闪的状态,虽然通常我们会用scale(x, y)更多- svg 的
image必须带宽高,否则 firefox 等浏览器不显示
text-transform有时会在跳页时回归最初(什么特定情况还未总结出)- 极少部分苹果机图片加载会阻塞后续程序
- 最好不要
for里面套 ajax,不然你的服务器会超级崩溃的,当然浏览器也会报出请求过量的错误 - overflow:hidden 在子级 transform 时无效,需要再套一层父级,有时子级的父级也无效,需要祖父级添加 overflow:hidden
- setTimeout("x()",500) 的 x 必须为全局函数,否则报错,所以还是用 setTimeout(x,500) 吧,同理
<div onclick="aaa()">的 aaa 也必须是全局函数 - 有些手机
<audio>不支持 m4a 格式的音频 - 禁用了
window的touchstart后input也不能点了 - 苹果机的
blur自主触发(即$dom.blur())有问题,有待实验 iframe套的网页会缓存,修改后刷新可能无效,且会保存 history,最好用一次就新建删除一次<datalist>并不好用,有时会不出现内容,且样式不可控,不推荐使用
- 苹果手机自动播放音频得放在
wx.ready里面 - 摇一摇事件有时清除不掉,可能是触发太多烧机器,推荐再加个变量控制开关
onstorage事件监听必须两个页面都打开着才能互传信息submit和button不能套在a里面,否则按钮事件将消失- 自己写的 Object.prototype.has 与 jquery 的 Tween 冲突,换个名字吧
- 苹果机的渐变
transparent可能会呈现为黑色,可用rgba(255,255,255,0) - 苹果机
rotateY问题超烦,旋转的一半后沉于body的背后不显示,需要translateZ来处理 - 大部分苹果机微信支付后无法再横屏
- 部分老牌机
window.orientation不准,进去就是 90,多转几次又好了,十分偶现 setInterval设置document.title移动端效果非常不稳定,用requestAnimationFrame就好了
absolute下的offsetLeft会以父级定位的相对位置来计算(可能有误,以后研究)Object.assign的this指向有待研究- 移动端同个
input[type="file"]的 change 事件只触发一次 - if lt IE 只能判断到 9,10+ 及 edge 都无效
- sourceTree 上传,大小写不区分,比如 Index 和 index
touchend时e.touches是已经不存在了的- canvas 的
globalAlpha小于 0 时会按 1 来计算 - 函数传参时最后多打个逗号,PC正常显示,但在移动端把后续程序全部卡住
- 在 Vue 实例元素内,自己 append 出来的元素是无法修改的
Vue.component必须放在new Vue前面
input弹出的虚拟键盘仅 number 有下一步这样的功能键flex下的<img width="50%">高度auto会失效,需align-item: flex-start- background 只支持 .svg 文件式的引用,无法使用 #xxx 代码式的引用
- 多个
transition-property会触发多次transitionEnd,注意 border / padding 会触发四次 - 多个 jquery 对象会触发多次动画回调,如
$('.x1, .x2').show(cb)会触发两次 cb - 小程序的音频最好不要超过 8 个,不然总是有警告
- 苹果机小程序背景音乐调不了音量
- delete 只能删数组和对象里的键值,不能删除变量、函数和函数的参数。比如
var a = 1; delete a; alert(a); // 1 - firefox 在 mask-size 小于 100% 时各种卡,大于时还行,不知怎么办
- 微信放视频没有自动播放,需要点击触发。可见此 教程