Home > Article > Web Front-end > 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:
For Edge browser downgrade processing, the effect is consistent with IE browser, there are no fixed columns, and the whole can be scrolled horizontally.
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:
<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:
@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!