angular中的浏览器兼容性问题怎么解决?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
相关教程推荐:《angular教程》
问题:edge浏览器下,固定列的边框消失
原因:ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列,这两个指令的实现css3中的标签:
position: -webkit-sticky !important; position: sticky !important;
谷歌、火狐及-webkit-内核的浏览器均支持该属性(css3),IE不支持该属性,所以在IE中,会自动降级,表格无固定列,可滑动的形式。
Edge浏览器在1703之后的版本使用了chromium内核,对css3的属性支持较好,也支持sticky属性,可以使用,可以固定表格列,但边框会消失。
解决方案:
目前可行的解决方案有如下几种:
针对Edge浏览器降级处理,与IE浏览器效果一致,无固定列,整体可横向滚动。
position: absolute;
这种方式来实现表格的固定列。第二个方案的详细过程如下:
使用p包裹表格,当表格宽度超过p宽度时,开启滚动:
.scroll-table { width: 100%; overflow-x: scroll; }
针对表格,我们可以指定宽度,让其超过外层p宽度(这样可以看到滚动效果)。
.fixed-table { width: 1300px; /* 可由th,td动态扩充,也可指定宽度 */ border-collapse: collapse; }
最后一个最核心的问题,就是固定列的实现了,非常简单,将表格的一列设置成绝对定位,在设置了绝对定位后,该列会脱离原来的文档流,表格少了一列,所以需要加一个背景板来保证表格能够给这个固定列留出一个位置。
HTML代码大致如下,这个fixed-col可以为固定列的样式,也可以设置成背景板的样式,demo中是用其指定了固定列的样式。
<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>
参考代码:Ironape
问题:Edge浏览器的日历(nz-range-picker)确认按钮需要点两次
原因:尚未明确
解决方案:
<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>
对应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可能永远都不会修复这个问题。
解决方案:
@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编码(不可以)
更多编程相关知识,请访问:编程入门!!
以上就是解决angular中的浏览器兼容性问题的方法介绍的详细内容,更多请关注php中文网其它相关文章!
已抢61955个
抢已抢110641个
抢已抢133310个
抢已抢32091个
抢已抢19397个
抢