前端開發常見問題(markdown)

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 {}
   }
 }

在 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 替代。

1. 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日

postion 不設置位置值

position 不設置具體的位置值時，在 魅藍 手機(魅族系統)存在問題，應避免使用。

margin、padding設置百分比值

margin、padding 在設置百分比值時，取值爲：百分比*父元素的width
原因：
因爲縱向是可以無限延展的，所以沒有一個一定的值可以被參照被用來計算。正常流中的大多數元素都會足夠高以包含其後代元素（包括外邊距），如果一個元素的上下外邊距是父元素的height的百分數，就可能導致一個無限循環，父元素的height會增加，以適應後代元素上下外邊距的增加，而相應的，上下外邊距因爲父元素height的增加也會增加，如此循環。

input date 在 iOS 上水平對齊的問題

在 iOS 設備上，input date 的默認佈局是display: -webkit-inline-flex;，因此要更改input date 的對齊模式，應使用flex的對齊方式。

iOS 微信 overflow auto 局部滾動無效的問題

在 iOS 老版本(iOS9)，使用微信時，微信會劫持 touchmove 事件，從而導致局部滾動失效，此時在需要局部滾動的元素或者在其父元素上添加 touchmove="" 或使用 js 綁定事件並阻止冒泡，可以解決這個問題。

重置max-width時的注意事項

應使用min-width: initial;，不要用min-width: auto;，因爲使用min-width: auto;時，在 ie 瀏覽器無效，包括 windows pc版微信。(記錄時間: 2019-5-23)

關於 text-decoration 疊加的問題

在給祖先元素設置 text-decoration 之後，對子元素設置text-decoration: none無法清除子元素的text-decoration效果，因此在使用該樣式的時候，要注意控制粒度。(記錄時間：2019-08-14)

iOS 鍵盤“搜索”按鍵

html提供type=search的模式，但是軟鍵盤彈起後，鍵盤上沒有“搜索”，必須在input外層加上form且必須有action屬性，監聽搜索按鈕使用form的submit事件。

<form action="">
	<input type="search" placeholder="" placeholder="請輸入搜索" />
</form>