window.open() 在 ajax 回撥中被阻止

由於安全限制，開啟新標籤的操作需由使用者直接觸發，使用程式觸發預設情況下會被阻止，因此把 winodw.open() 的程式碼放在事件處理函式中即可解決此問題。

 固定在底部的輸入框，在 IOS 裝置上顯示的問題

1. 當輸入框以 flex 佈局的形式固定在底部，如：

.page {
  height: 100%;
  display: flex;
  flex-direction: column;

  & > .container {
    flex: 1;
    overflow: auto;
  }

  & > footer {
    height: 44px;
    line-height: 44px;

    input {}
  }
}

以上只給出 css 程式碼，html 程式碼自行腦補，此時會出現如下問題(測試時間：2017-09-01 12:18:08) 
1. 輸入框被軟鍵盤遮住(系統輸入法或者搜狗輸入法) 
2. 輸入內容之後，輸入框不可見，游標仍在，此時，軟鍵盤的完成按鈕，關閉軟鍵盤，然後向下滑動 .container 的內容，輸入框顯示正常

 解決辦法： 
上述 css 調整如下：

 .page {
   height: 100%;
   display: flex;
   flex-direction: column;
   position: relative;

   & > .container {
     flex: 1;
     overflow: auto;
   }

   & > footer {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 44px;
     line-height: 44px;

     input {}
   }
 }
1

 在 input 聚焦時的事件處理函式中，寫如下程式碼：

 window.setTimeout(() => {
   document.body.scrollTop = document.body.scrollHeight
 }, 200)

 ios input disabled 顏色顯示太淺的問題

解決辦法：

:disabled {
      -webkit-text-fill-color: #666;
      opacity: 1;
      border: 1px solid #DADADE;
}

a 標籤的 download 屬性沒作用 

1. Firefox考慮到安全問題，如果要下載的檔案和當前頁面不是在同一個域名中，將在瀏覽器中開啟。
2. 在Chrome和Opera中，如果要下載的檔案和當前頁面不是在同一個域名中，瀏覽器會忽視download屬性，其結果就是檔名不變。

 ie11

1. ie11 不支援 width: initial; 

width: initial; 在 ie 11 無法識別，應使用 width: auto 替代。

• ie11 border-box 對 flex 彈性子元素無效 
  如：flex: 0 0 100px; padding-left: 10px; 此時元素的寬度的為 110px，為避免在 ie 上出現樣式不一致的問題，應避免寫和上述類似的程式碼。

 query-string 元件

query-string 存在 相容性 問題，該元件使用了 Object.assign ，以及在構建之後會出現 const 的問題

Map 的簡寫 

new Map([ [ ‘key’, ‘value’ ] ]) 的語法，babel 在轉換的時候，會保留原始程式碼，iOS 8 不支援這種語法，寫的時候應避免出現這種程式碼。 – 2018年07月11日