小编给大家分享一下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中是用其指定了固定列的样式。
| 无效背景板 | 固定列 |
|---|---|
| 无效背景板 | 固定列 |
参考代码：Ironape
问题：Edge浏览器的日历（nz-range-picker）确认按钮需要点两次
原因：尚未明确
解决方案：
对应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中的浏览器兼容性问题怎么解决有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！