解決angular中的瀏覽器相容性問題的方法介紹

angular中的瀏覽器相容性問題怎麼解決？下面這篇文章跟大家介紹一下。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關教學推薦：《angular教學》

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

原因：ng-zorro-antd表格元件使用nzLeft和nzRight指令固定的表格列，這兩個指令的實作css3中的標籤：

position: -webkit-sticky !important;
position: sticky !important;

Google、火狐及-webkit-核心的瀏覽器皆支援此屬性（css3），IE不支援此屬性，所以在IE中，會自動降級，表格無固定列，可滑動的形式。

Edge瀏覽器在1703之後的版本使用了chromium內核，對css3的屬性支援較好，也支援sticky屬性，可以使用，可以固定表格列，但邊框會消失。

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

不使用固定列，若產品沒有明確要求使用固定列，可以放棄使用nzLeft及nzRight來固定表格。從而使各個瀏覽器下的展示效果一致。
1. 針對Edge瀏覽器降級處理，與IE瀏覽器效果一致，無固定列，整體可橫向捲動。

自訂實作固定列，不使用元件的固定列實現，透過使用
2. position: absolute;這種方式來實現表格的固定列。

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

使用p包裹表格，當表格寬度超過p寬度時，開啟捲動：

.scroll-table {
  width: 100%;
  overflow-x: scroll;
}

針對表格，我們可以指定寬度，讓其超過外層p寬度（這樣可以看到滾動效果）。

.fixed-table {
  width: 1300px; /* 可由th，td动态扩充，也可指定宽度 */
  border-collapse: collapse;
}

最後一個最核心的問題，就是固定列的實現了，非常簡單，將表格的一列設置成絕對定位,在設置了絕對定位後，該列會脫離原來的文檔流，表格少了一列，所以需要加一個背景板來確保表格能夠為這個固定列留出一個位置。

HTML程式碼大致如下，這個fixed-col可以為固定列的樣式，也可以設定成背景板的樣式，demo中是用其指定了固定列的樣式。

<p 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>
</p>

#參考代碼：Ironape

---

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

原因：尚未明確

#解決方案：

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

<nz-range-picker [nzRenderExtraFooter]="renderExtraFooterTpl">
<ng-template #renderExtraFooterTpl>
  <p>
    <button nz-button nzType="primary" class="ant-calendar-ok-btn abs-right">确 定</button>
  </p>
</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里面，而不会把他并入框架），并在对应的模块中引用。

另注：IE的输入框会因为placeholder为中文而触发表单验证，placeholder改变了也会触发表单验证，所以，有一个讨巧的方法，placeholder里面的内容写成英文形式(推荐），但这显然不符合中文产品的需求，而且这显然没有国际化。所以可以想办法绕过这一条，使用 HTML实体（已验证，可行），Unicode编码（不可以）

更多编程相关知识，请访问：编程入门！！

以上是解決angular中的瀏覽器相容性問題的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！