angular瀏覽器兼容性問題解決方案

問題：edge瀏覽器下，固定列的邊框消失

緣由：ng-zorro-antd表格組件使用nzLeft和nzRight指令固定的表格列，這兩個指令的實現css3中的標籤：

position: -webkit-sticky !important;
position: sticky !important;
複製代碼

谷歌、火狐及-webkit-內核的瀏覽器均支持該屬性（css3），IE不支持該屬性，因此在IE中，會自動降級，表格無固定列，可滑動的形式。
Edge瀏覽器在1703以後的版本使用了chromium內核，對css3的屬性支持較好，也支持sticky屬性，可使用，能夠固定表格列，但邊框會消失。

解決方案：
目前可行的解決方案有以下幾種：

1. 不使用固定列，若產品沒有明確要求使用固定列，能夠放棄使用nzLeft及nzRight來固定表格。從而使各個瀏覽器下的展現效果一致。

   針對Edge瀏覽器降級處理，與IE瀏覽器效果一致，無固定列，總體可橫向滾動。

2. 自定義實現固定列，不使用組件的固定列實現，經過使用position: absolute;這種方式來實現表格的固定列。

第二個方案的詳細過程以下：

使用div包裹表格，當表格寬度超過div寬度時，開啓滾動：

.scroll-table {
  width: 100%;
  overflow-x: scroll;
}
複製代碼

針對表格，咱們能夠指定寬度，讓其超過外層div寬度（這樣能夠看到滾動效果）。

.fixed-table {
  width: 1300px; /* 可由th，td動態擴充，也可指定寬度 */
  border-collapse: collapse;
}
複製代碼

最後一個最核心的問題，就是固定列的實現了，很是簡單，將表格的一列設置成絕對定位,在設置了絕對定位後，該列會脫離原來的文檔流，表格少了一列，因此須要加一個背景板來保證表格可以給這個固定列留出一個位置。

HTML代碼大體以下，這個fixed-col能夠爲固定列的樣式，也能夠設置成背景板的樣式，demo中是用其指定了固定列的樣式。

<div class="scroll-table">
    <table class="fixed-table">
        <thead>
            <tr>
                <th>無效背景板</th>
                <th class="fixed-col">固定列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>無效背景板</td>
                <td class="fixed-col">固定列</td>
            </tr>
        </tbody>
    </table>
</div>
複製代碼

參考代碼：Ironape

---

問題：Edge瀏覽器的日曆（nz-range-picker）確認按鈕須要點兩次

緣由：還沒有明確

解決方案：

1. 升級組件版本，目前ng-zorro-antd 8.5之上的版本未見這個問題。
2. 自定義頁腳，加入額外的頁腳，來替代肯定功能，此時有兩種方式來實現：
   只覆蓋對應的按鈕，如肯定按鈕，此時按鈕的樣式與默認的頁腳按鈕是不一致的，爲保持一致，能夠自定義樣式，也能夠直接使用默認頁腳中按鈕的樣式，下例中選擇直接使用組件庫的樣式：ant-calendar-ok-btn，第二步則是覆蓋原來的按鈕，可使用絕對定位的方式來實現覆蓋：

<nz-range-picker [nzRenderExtraFooter]="renderExtraFooterTpl">
<ng-template #renderExtraFooterTpl>
  <div>
    <button nz-button nzType="primary" class="ant-calendar-ok-btn abs-right">確 定</button>
  </div>
</ng-template>
複製代碼

對應css：

.abs-right {
  position: absolute;
  right: 12px;
  top: 7px;
  z-index: 1;
  box-shadow: none;
}
複製代碼

刪除默認頁腳，徹底自定義實現頁腳。此時須要刪除原來的頁腳，可經過：

::ng-deep .ant-calendar-footer-btn {
  display: none;
}
複製代碼

這種方式刪除默認頁腳，此時額外的頁腳不可以使用絕對定位。

---

問題：IE瀏覽器下，在多個tab頁中切換，echart所在容器高度坍塌

緣由：IE瀏覽器下父元素不能動態調整高度（即經過子元素動態改變調整高度）

解決方案：固定echart圖表所在的容器高度

---

問題：IE瀏覽器下，初始化表單時，觸發表單驗證

緣由：這個是IE的問題，IE10+實現了input事件，可是觸發的時機倒是錯誤的。好比在placeholder改變時，placeholder的文字不是英語的時候就會觸發，Edge15+修復了這個問題，可是IE可能永遠都不會修復這個問題。

解決方案：

1. 使用表單的reset()重置表單，可是重置的操做須要放在setTimeout中，或者經過其餘手段將重置的操做做爲表單初始化時的最後一個宏任務執行。這種方式經驗證，最終的效果是，初始化表單後，表單輸入元素的邊框閃爍（紅色）一下。
2. 使用自定義的服務商插件（較爲推薦），這種方式對原有代碼的破壞性小（遵循了OCP原則），該插件是由DerSizeS提供的。只須要在對應的module中增長一個服務商便可

@NgModule({
    providers: [{
        provide: EVENT_MANAGER_PLUGINS, multi: true,
        useClass: UniqueInputEventPlugin, deps: [UNIQUE_INPUT_EVENT_PLUGIN_CONFIG],
    }]  
})
class MyModule {}
複製代碼

須要注意的是，插件須要本身添加到項目文件中（根據angular團隊所說，這個插件修復了一個IE10或者IE11的bug，可是提交了太多的代碼，這會給增長現有的應用的打包體積，雖而後面關於這個PR討論了挺久，可是看樣子是準備把這個放到FAQ裏面，而不會把他併入框架），並在對應的模塊中引用。

3. IE的輸入框會由於placeholder爲中文而觸發表單驗證，placeholder改變了也會觸發表單驗證，因此，有一個討巧的方法，placeholder裏面的內容寫成英文形式(推薦），但這顯然不符合中文產品的需求，並且這顯然沒有國際化。因此能夠想辦法繞過這一條，使用 HTML實體（已驗證，可行），Unicode編碼（不能夠）