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

永恆君發表於2019-09-24
  • 子元素為 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 一下，嚶嚶嚶~


相關文章