Introduction to methods to solve browser compatibility issues in Angular

How to solve the browser compatibility problem in

angular? The following article will introduce it to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related tutorial recommendations: "angular tutorial"

Question: edge Under the browser, the border of the fixed column disappears

Cause: The ng-zorro-antd table component uses the nzLeft and nzRight instructions to fix the table columns. These two instructions Implement tags in css3:

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

Google, Firefox and -webkit-kernel browsers all support this attribute (css3). IE does not support this attribute, so in IE, it will be automatically downgraded and the table will be empty. Fixed column, slideable form.
Edge browser uses the chromium kernel in versions after 1703, which has better support for CSS3 attributes and also supports the sticky attribute. It can be used and fixed table columns, but the border will disappear.

Solution:
The currently feasible solutions are as follows:

1. Do not use fixed columns. If the product If there is no explicit requirement to use fixed columns, you can abandon the use of nzLeft and nzRight to fix the table. This makes the display effect consistent across browsers.

   For Edge browser downgrade processing, the effect is consistent with IE browser, there are no fixed columns, and the whole can be scrolled horizontally.

2. Customize the fixed column implementation, do not use the fixed column implementation of the component, and implement the fixed column of the table by using position: absolute;.

The detailed process of the second plan is as follows:

Use p to wrap the table. When the width of the table exceeds the width of p, enable scrolling:

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

For the table, We can specify a width that exceeds the outer p width (so you can see the scrolling effect).

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

The last and most core issue is the implementation of fixed columns. It is very simple. Set a column of the table to absolute positioning. After setting the absolute positioning, the column will be separated from the original document flow. The table There is one missing column, so a background panel needs to be added to ensure that the table can leave a place for this fixed column.

The HTML code is roughly as follows. This fixed-col can be the style of a fixed column, or it can be set to the style of the background panel. In the demo, it is used to specify the style of the fixed column.

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

Reference code: Ironape

---

Problem: The Edge browser’s calendar (nz-range-picker) confirmation button needs to be clicked Twice

Cause: Not yet clear

Solution:

1. Upgrade component version. Currently, this problem does not occur in versions above ng-zorro-antd 8.5.
2. Custom footer Add an additional footer to replace the OK function. There are two ways to achieve this:
   Only cover the corresponding button, such as the OK button, At this time, the style of the button is inconsistent with the default footer button. To maintain consistency, you can customize the style, or you can directly use the style of the button in the default footer. In the following example, you choose to directly use the style of the component library: ant-calendar -ok-btn, the second step is to overwrite the original button. You can use absolute positioning to achieve overwriting:

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

Corresponding css:

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

Delete the default footer, Completely customizable footer. At this time, you need to delete the original footer. You can delete the default footer through:

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

. At this time, the additional footer cannot use absolute positioning.

---

Problem: Under IE browser, when switching between multiple tab pages, the height of the container where echart is located collapses

Cause: The height of the parent element cannot be dynamically adjusted under the IE browser (that is, the height is dynamically changed through the child elements)

Solution: Fixed the height of the container where the echart chart is located

---

## Problem : Under IE browser, when the form is initialized, form validation is triggered

Cause: This is a problem with IE. IE10 implements the input event, but the triggering time is wrong. For example, when the placeholder is changed, it will be triggered when the text of the placeholder is not in English. Edge15 fixed this problem, but IE may never fix this problem.

solution:

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编码（不可以）

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

The above is the detailed content of Introduction to methods to solve browser compatibility issues in Angular. For more information, please follow other related articles on the PHP Chinese website!