问题：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外面，而不会把他并入框架），并在对应的模块中援用。

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

本文首发于集体博客，欢送来撩啊^-^。