看似没用的小知识点 vol.1

324 阅读3分钟
  • 子元素为 inline-block 时父级底部会有一点空隙,与 vertical-align + line-height 有关,案例

  • canvas 的 lineWidth 即使设成 0 也还会是 1

  • [NaN].indexOf(NaN); // -1 数组中找不到 NaN

  • transform: scale(.5) 下的 offsetWidth 等还是原宽,只能 getBoundingClientRect().width

  • 通常浏览器下 /#/ 是 hash,但 IE 浏览器会认为是路径造成无法访问,只能改用 history 模式

  • <select>readonly 不可选但能点开,推荐使用 select[readonly]{ pointer-events: none; }

  • letconst 不会像 var 一样会在 window 下声明,比如 let a 是取不到 window.a

  • wx.onMenuShareAppMessagetype 不能是空字符串,要么不传,要么 type: "link"

  • wx.config 需要传入的链接,苹果机下如果使用过 history api 将签名失败

  • 苹果机键盘弹起后元素上移,键盘收回后元素不归位,用 $(document).scrollTop(0, 0); 解决(部分机型依旧不行)

  • 3.0 版本前的 $.fn.param 会把 空格 转为 + 号,可能会与其他 + 相同而冲突

  • IOS 下的 webgl 不清晰,可新建个 2d 的 canvas 去绘制 webgl 的 getImageDate

  • 小程序不会正确处理图片链接中 \,造成图片请求但不显示,只能是 / 式的路径,比如 图片

  • 部分安卓机 background-imageborder-radius 合用会不显示图片,需加上 background-color 才行

  • input[type="number"] 不支持使用 selection 相关的光标操作

  • data:image/svg+xml, 拼出来的 SVG 背景图,background-size 不支持拉伸

  • btoa 转 base64 不支持传入中文等 Unicode 字符,可搭配 encodeURIComponent 使用

  • IOS 的 iframe 不支持传高度,最好有个父级包着并设 -webkit-overflow-scrolling 滚动

  • input[type="checkbox"] 加字符串 checked="false"setAttribute('checked', '') 也会勾选

  • html 中 data-userId 会显示为全小写 data-userid,但 attr('data-USERID') 不区分大小写都能获取到

  • UTF-16 字符在处理字符串时需注意,比如 '𠮷'.slice(-1) 会得到未知字符,恐怕只能用 for-of 来做了

  • :last-child 是按 dom 位置来的,并不受 order 排序的影响

  • display: inline 设 text-indent:-999em 无效(有部分版本的 chrome 存在该问题)

  • 父级无高度时,子级 position: relative 的百分比定位 top: 50% 会无效

  • 父级 overflow:auto; position:relative;,子级绝对定位并超出,结果会显示滚动条,并非完全脱离文档流

  • <script src="xx.js" /> 不能使用单标签格式,不然会把后面的都当做文本

  • ElementUI 的 el-date-picker[type="daterange"]火狐 下不支持 yyyy.MM.dd 格式数据的传入,-/ 可以

  • mask 的元素 box-shadowinset 形态无效,filter:drop-shadow() 也是如此(可放到父级去)

  • https 下无法点击打开下载 http 的资源

  • input[type="file"] 的触发会触发 window.onblur 事件,可用 document.activeElement 来进行排除

  • label[for] 的父级上加点击事件绑定,会触发两次 click,很迷

  • new RegExp 需对特殊字符进行转义,比如 new RegExp('\\d').test(1) 中的 \d 需转移

  • 苹果机上当 divclick 委托在 documentbody 上会无法点击,可换为 a 或添加 cursor: pointer 等。见文

  • 苹果机移动端 contenteditable 无效,需加上 -webkit-user-select: text

  • 小程序的 cover-view 不能使用 :beforegradient 样式

  • disabled 会禁掉 mouse 事件,却没有禁 touch 事件

  • $.fn.serializeArray 方法会把回车 \n 改为 \r\n,增加了字符串长度

  • Math.round 四舍五入方法可能有误,见 推文

  • 苹果机在 QQ 浏览器中修改 document.title 无效,需新建删除一个 iframe 来骚操作

  • 粘贴功能 execCommand('paste') 被各家浏览器禁用掉了

  • 小程序的 cover-view 手机上不触发 touch 事件

  • :not(.x):last-of-type 并不代表去掉 .x 后的最后一个,它们是并列关系而非先后关系

---------------------------------------------------

先整理第一期吧,希望对你有些帮助,

欢迎来 GayHub 给我 star 一下,嘤嘤嘤~