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

問(wèn)題 ：edge瀏覽器下，固定列的邊框消失

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

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

谷歌、火狐及-webkit-內(nèi)核的瀏覽器均支持該屬性（css3），IE不支持該屬性，所以在IE中，會(huì)自動(dòng)降級(jí)，表格無(wú)固定列，可滑動(dòng)的形式。

Edge瀏覽器在1703之后的版本使用了chromium內(nèi)核，對(duì)css3的屬性支持較好，也支持sticky屬性，可以使用，可以固定表格列，但邊框會(huì)消失。

解決方案 ：

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

• 不使用固定列，若產(chǎn)品沒(méi)有明確要求使用固定列，可以放棄使用nzLeft及nzRight來(lái)固定表格。從而使各個(gè)瀏覽器下的展示效果一致。
  針對(duì)Edge瀏覽器降級(jí)處理，與IE瀏覽器效果一致，無(wú)固定列，整體可橫向滾動(dòng)。
• 自定義實(shí)現(xiàn)固定列，不使用組件的固定列實(shí)現(xiàn)，通過(guò)使用 position: absolute; 這種方式來(lái)實(shí)現(xiàn)表格的固定列。

第二個(gè)方案的詳細(xì)過(guò)程如下：

使用div包裹表格，當(dāng)表格寬度超過(guò)div寬度時(shí)，開(kāi)啟滾動(dòng)：

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

針對(duì)表格，我們可以指定寬度，讓其超過(guò)外層div寬度（這樣可以看到滾動(dòng)效果）。

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

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

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

<div class="scroll-table">
 <table class="fixed-table">
 <thead>
  <tr>
  <th>無(wú)效背景板</th>
  <th class="fixed-col">固定列</th>
  </tr>
 </thead>
 <tbody>
  <tr>
  <td>無(wú)效背景板</td>
  <td class="fixed-col">固定列</td>
  </tr>
 </tbody>
 </table>
</div>

參考代碼：Ironape

Edge瀏覽器的日歷（nz-range-picker）確認(rèn)按鈕需要點(diǎn)兩次

問(wèn)題 ：Edge瀏覽器的日歷（nz-range-picker）確認(rèn)按鈕需要點(diǎn)兩次

原因 ：尚未明確

解決方案：
升級(jí)組件版本，目前ng-zorro-antd 8.5之上的版本未見(jiàn)這個(gè)問(wèn)題。

1. 自定義頁(yè)腳，加入額外的頁(yè)腳，來(lái)替代確定功能，此時(shí)有兩種方式來(lái)實(shí)現(xiàn)：
2. 只覆蓋對(duì)應(yīng)的按鈕，如確定按鈕，此時(shí)按鈕的樣式與默認(rèn)的頁(yè)腳按鈕是不一致的，為保持一致，可以自定義樣式，也可以直接使用默認(rèn)頁(yè)腳中按鈕的樣式，下例中選擇直接使用組件庫(kù)的樣式：ant-calendar-ok-btn，第二步則是覆蓋原來(lái)的按鈕，可以使用絕對(duì)定位的方式來(lái)實(shí)現(xiàn)覆蓋：

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

對(duì)應(yīng)css：

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

刪除默認(rèn)頁(yè)腳，完全自定義實(shí)現(xiàn)頁(yè)腳。此時(shí)需要?jiǎng)h除原來(lái)的頁(yè)腳，可通過(guò)：

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

這種方式刪除默認(rèn)頁(yè)腳，此時(shí)額外的頁(yè)腳不可使用絕對(duì)定位。

IE瀏覽器下，在多個(gè)tab頁(yè)中切換，echart所在容器高度坍塌

問(wèn)題 ：IE瀏覽器下，在多個(gè)tab頁(yè)中切換，echart所在容器高度坍塌

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

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

IE瀏覽器下，初始化表單時(shí)，觸發(fā)表單驗(yàn)證

問(wèn)題 ：IE瀏覽器下，初始化表單時(shí)，觸發(fā)表單驗(yàn)證

原因 ：這個(gè)是IE的問(wèn)題，IE10+實(shí)現(xiàn)了input事件，但是觸發(fā)的時(shí)機(jī)卻是錯(cuò)誤的。比如在placeholder改變時(shí)，placeholder的文字不是英語(yǔ)的時(shí)候就會(huì)觸發(fā)，Edge15+修復(fù)了這個(gè)問(wèn)題，但是IE可能永遠(yuǎn)都不會(huì)修復(fù)這個(gè)問(wèn)題。

解決方案：

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

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

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

3.IE的輸入框會(huì)因?yàn)閜laceholder為中文而觸發(fā)表單驗(yàn)證，placeholder改變了也會(huì)觸發(fā)表單驗(yàn)證，所以，有一個(gè)討巧的方法， placeholder里面的內(nèi)容寫(xiě)成英文形式(推薦） ，但這顯然不符合中文產(chǎn)品的需求，而且這顯然沒(méi)有國(guó)際化。所以可以想辦法繞過(guò)這一條，使用 HTML實(shí)體 （已驗(yàn)證，可行），Unicode編碼（不可以）

總結(jié)

到此這篇關(guān)于關(guān)于angular瀏覽器兼容性問(wèn)題的解決方案的文章就介紹到這了,更多相關(guān)angular瀏覽器兼容性問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論