小編給大家分享一下angular中的瀏覽器兼容性問題怎么解決，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的呼和浩特網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

原因：ng-zorro-antd表格組件使用nzLeft和nzRight指令固定的表格列，這兩個指令的實現(xiàn)css3中的標簽：

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

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

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

1. 不使用固定列，若產(chǎn)品沒有明確要求使用固定列，可以放棄使用nzLeft及nzRight來固定表格。從而使各個瀏覽器下的展示效果一致。

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

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

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

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

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

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

.fixed-table {
  width: 1300px; /* 可由th，td動態(tài)擴充，也可指定寬度 */
  border-collapse: collapse;
}

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

HTML代碼大致如下，這個fixed-col可以為固定列的樣式，也可以設(shè)置成背景板的樣式，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. 自定義頁腳，加入額外的頁腳，來替代確定功能，此時有兩種方式來實現(xiàn)：
   只覆蓋對應(yīng)的按鈕，如確定按鈕，此時按鈕的樣式與默認的頁腳按鈕是不一致的，為保持一致，可以自定義樣式，也可以直接使用默認頁腳中按鈕的樣式，下例中選擇直接使用組件庫的樣式：ant-calendar-ok-btn，第二步則是覆蓋原來的按鈕，可以使用絕對定位的方式來實現(xiàn)覆蓋：

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

對應(yīng)css：

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

刪除默認頁腳，完全自定義實現(xiàn)頁腳。此時需要刪除原來的頁腳，可通過：

::ng-deep .ant-calendar-footer-btn {
  display: none;
}

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

---

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

原因：IE瀏覽器下父元素不能動態(tài)調(diào)整高度（即通過子元素動態(tài)改變調(diào)整高度）

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

---

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

原因：這個是IE的問題，IE10+實現(xiàn)了input事件，但是觸發(fā)的時機卻是錯誤的。比如在placeholder改變時，placeholder的文字不是英語的時候就會觸發(fā)，Edge15+修復(fù)了這個問題，但是IE可能永遠都不會修復(fù)這個問題。

解決方案：

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

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

需要注意的是，插件需要自己添加到項目文件中（根據(jù)angular團隊所說，這個插件修復(fù)了一個IE10或者IE11的bug，但是提交了太多的代碼，這會給增加現(xiàn)有的應(yīng)用的打包體積，雖然后面關(guān)于這個PR討論了挺久，但是看樣子是準備把這個放到FAQ里面，而不會把他并入框架），并在對應(yīng)的模塊中引用。

另注：IE的輸入框會因為placeholder為中文而觸發(fā)表單驗證，placeholder改變了也會觸發(fā)表單驗證，所以，有一個討巧的方法，placeholder里面的內(nèi)容寫成英文形式(推薦），但這顯然不符合中文產(chǎn)品的需求，而且這顯然沒有國際化。所以可以想辦法繞過這一條，使用 HTML實體（已驗證，可行），Unicode編碼（不可以）

看完了這篇文章，相信你對angular中的瀏覽器兼容性問題怎么解決有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文題目：angular中的瀏覽器兼容性問題怎么解決
分享網(wǎng)址：http://chinadenli.net/article34/gjdspe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網(wǎng)站設(shè)計、電子商務(wù)、營銷型網(wǎng)站建設(shè)、網(wǎng)站營銷、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)