看似好像沒用的小知識點 vol.1

• 子元素爲 inline-block 時父級底部會有一點空隙，與 vertical-align + line-height 有關，案例
• canvas 的 lineWidth 即便設成 0 也還會是 1
• [NaN].indexOf(NaN); // -1 數組中找不到 NaN

• transform: scale(.5) 下的 offsetWidth 等仍是原寬，只能 getBoundingClientRect().width
• 其餘瀏覽器下單頁面項目的 /#/ 被認爲是 hash，但 IE 瀏覽器會認爲是路徑，會形成沒法訪問
• <select> 的 readonly 仍是能點開，推薦使用 select[readonly] { pointer-events: none; }
• let 和 const 不會像 var 同樣會在 window 下聲明，好比 let a 是取不到 window.a 的
• wx.onMenuShareAppMessage 的 type 不能是空字符串，要麼不傳，要麼 type: "link"
• wx.config 須要傳入的連接，蘋果機下若是使用過 history api 將簽名失敗
• CSS 的 content 的文本和圖片，是不可選擇的

• 蘋果機鍵盤彈起後元素上移，鍵盤收回後元素不歸位，用 $(document).scrollTop(0, 0); 解決（部分機型依舊不行）
• 3.0 版本前的 $.fn.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.x 的
  
• 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 來作了
• 空數組進行 every 判斷始終爲 true，需根據場景作好排除
• :last-child 是按 dom 位置來的，並不受 order 排序的影響
  
• display: inline 設 text-indent:-999em 無效
• 父級無高度時，子級 position: relative 的百分比定位 top: 50% 會無效
  
• 父級 overflow:auto; position:relative;，子級絕對定位並超出，結果會顯示滾動條，並不是徹底脫離文檔流
  
• <script src="xx.js" /> 不能使用單標籤格式，否則會把後面的都當作文本
  
• 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，很迷
• new RegExp 需對特殊字符進行轉義，好比 new RegExp('\\d').test(1) 纔有效，仍是 /\d/.test(1) 好呀。
• 設置 border-image 後，border-radius 失效。
• 給定位的 body 設 background-size，如 100% 100% 或 contain 會沒有相對高度，但 cover 有效。
• 蘋果機上當 div 的 click 委託在 document 或 body 上會沒法點擊，可換爲 a 或添加 cursor: pointer 等。見文
• 蘋果機移動端 contenteditable 無效，需加上 -webkit-user-select: text

• 小程序的 cover-view 不能使用 :before 和 gradient 樣式
• disabled 會禁掉 mouse 事件，卻沒有禁 touch 事件
• $.fn.serializeArray 方法會把回車 \n 改成 \r\n，增長了字符串長度
• Math.round 四捨五入方法可能有誤，見 推文
• 蘋果機在 QQ 瀏覽器中修改 document.title 無效，需新建刪除一個 iframe 來騷操做
• 粘貼功能 execCommand('paste') 被各家瀏覽器禁用掉了
• 小程序的 cover-view 手機上不觸發 touch 事件
• inline 行級元素設置 transform 無效
• 蘋果機沒有原生雙擊事件 dblclick
• :not(.x):last-of-type 並不表明去掉 .x 後的最後一個，它們是並列關係而非前後關係

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

先整理第一期吧，但願對你有些幫助，

歡迎來 GayHub 給我 star 一下，嚶嚶嚶~