angular浏览器兼容性问题解决方案

2次阅读

共计 2603 个字符，预计需要花费 7 分钟才能阅读完成。

问题：edge 浏览器下，固定列的边框隐没

起因：ng-zorro-antd 表格组件应用 nzLeft 和 nzRight 指令固定的表格列，这两个指令的实现 css3 中的标签：

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

谷歌、火狐及 -webkit- 内核的浏览器均反对该属性（css3），IE 不反对该属性，所以在 IE 中，会主动降级，表格无固定列，可滑动的模式。
Edge 浏览器在 1703 之后的版本应用了 chromium 内核，对 css3 的属性反对较好，也反对 sticky 属性，能够应用，能够固定表格列，但边框会隐没。

解决方案 ：
目前可行的解决方案有如下几种：

不应用固定列，若产品没有明确要求应用固定列，能够放弃应用 nzLeft 及 nzRight 来固定表格。从而使各个浏览器下的展现成果统一。
针对 Edge 浏览器降级解决，与 IE 浏览器成果统一，无固定列，整体可横向滚动。
自定义实现固定列，不应用组件的固定列实现，通过应用 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）确认按钮须要点两次

起因：尚未明确

解决方案：

降级组件版本，目前 ng-zorro-antd 8.5 之上的版本未见这个问题。
自定义页脚 ，退出额定的页脚，来代替确定性能，此时有两种形式来实现：
只笼罩对应的按钮，如确定按钮，此时按钮的款式与默认的页脚按钮是不统一的，为保持一致，能够自定义款式，也能够间接应用默认页脚中按钮的款式，下例中抉择间接应用组件库的款式：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 可能永远都不会修复这个问题。

解决方案：

应用表单的 reset()重置表单，然而重置的操作须要放在 setTimeout 中，或者通过其余伎俩将重置的操作作为表单初始化时的最初一个宏工作执行。这种形式教训证，最终的成果是，初始化表单后，表单输出元素的边框闪动（红色）一下。
应用自定义的服务商插件（较为举荐），这种形式对原有代码的破坏性小（遵循了 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 编码（不能够）